<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Geometry Interfaces Module Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="refining" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This specification provides basic geometric interfaces to represent points, rectangles, quadrilaterals and transformation matrices that can be used by other modules or specifications." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
  <link href="https://www.w3.org/TR/geometry-1/" rel="canonical">
<script defer src="https://test.csswg.org/harness/annotate.js#!geometry-1_dev/geometry-1" type="text/javascript"></script>
<style>
a.selected-text-file-an-issue {
  position: fixed;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  font-size: smaller;
  padding: 4px 10px;
  z-index: 4;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-caniuse-panel */

            .caniuse-status { font: 1em sans-serif; width: 9em; padding: 0.3em; position: absolute; z-index: 8; top: auto; right: 0.3em; background: #EEE; color: black; box-shadow: 0 0 3px #999; overflow: hidden; border-collapse: initial; border-spacing: initial; }
            .caniuse-status.wrapped { width: 1em; height: 1em; }
            .caniuse-status.wrapped > :not(input) { display: none; }
            .caniuse-status > input { position: absolute; right: 0; top: 0; width: 1em; height: 1em; border: none; background: transparent; padding: 0; margin: 0; }
            .caniuse-status > p { font-size: 0.6em; margin: 0; padding: 0; }
            .caniuse-status > p + p { padding-top: 0.5em; }
            .caniuse-status > .support { display: block; }
            .caniuse-status > .support > span { padding: 0.2em 0; display: block; display: table; }
            .caniuse-status > .support > span.partial { color: #666666; filter: grayscale(50%); }
            .caniuse-status > .support > span.no { color: #CCCCCC; filter: grayscale(100%); }
            .canisue-status > .support > span.no::before { opacity: 0.5; }
            .caniuse-status > .support > span:first-of-type { padding-top: 0.5em; }
            .caniuse-status > .support > span > span { padding: 0 0.5em; display: table-cell; vertical-align: top; }
            .caniuse-status > .support > span > span:first-child { width: 100%; }
            .caniuse-status > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; }
            .caniuse-status > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; }
            .caniuse-status > .support > .and_chr::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); }
            .caniuse-status > .support > .and_ff::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); }
            .caniuse-status > .support > .and_uc::before { background-image: url(https://resources.whatwg.org/browser-logos/uc.png); } /* UC Browser for Android */
            .caniuse-status > .support > .android::before { background-image: url(https://resources.whatwg.org/browser-logos/android.svg); }
            .caniuse-status > .support > .bb::before { background-image: url(https://resources.whatwg.org/browser-logos/bb.jpg); } /* Blackberry Browser */
            .caniuse-status > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); }
            .caniuse-status > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); }
            .caniuse-status > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); }
            .caniuse-status > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); }
            .caniuse-status > .support > .ie_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/ie-mobile.svg); }
            .caniuse-status > .support > .ios_saf::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); }
            .caniuse-status > .support > .op_mini::before { background-image: url(https://resources.whatwg.org/browser-logos/opera-mini.png); }
            .caniuse-status > .support > .op_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); }
            .caniuse-status > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); }
            .caniuse-status > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); }
            .caniuse-status > .support > .samsung::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); }
            .caniuse-status > .caniuse { text-align: right; font-style: italic; }
            @media (max-width: 767px) {
                .caniuse-status.wrapped { width: 9em; height: auto; }
                .caniuse-status:not(.wrapped) { width: 1em; height: 1em; }
                .caniuse-status.wrapped > :not(input) { display: block; }
                .caniuse-status:not(.wrapped) > :not(input) { display: none; }
            }</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">Geometry Interfaces Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://drafts.fxtf.org/geometry/">https://drafts.fxtf.org/geometry/</a>
     <dt>Latest published version:
     <dd><a href="https://www.w3.org/TR/geometry-1/">https://www.w3.org/TR/geometry-1/</a>
     <dt>Previous Versions:
     <dd><a href="https://www.w3.org/TR/2014/CR-geometry-1-20141125/" rel="prev">https://www.w3.org/TR/2014/CR-geometry-1-20141125/</a>
     <dd><a href="https://www.w3.org/TR/2014/WD-geometry-1-20140918/" rel="prev">https://www.w3.org/TR/2014/WD-geometry-1-20140918/</a>
     <dd><a href="https://www.w3.org/TR/2014/WD-geometry-1-20140626/" rel="prev">https://www.w3.org/TR/2014/WD-geometry-1-20140626/</a>
     <dd><a href="https://www.w3.org/TR/2014/WD-geometry-1-20140522/" rel="prev">https://www.w3.org/TR/2014/WD-geometry-1-20140522/</a>
     <dd><a href="https://www.w3.org/TR/2013/WD-matrix-20130919/" rel="prev">https://www.w3.org/TR/2013/WD-matrix-20130919/</a>
     <dt>Test Suite:
     <dd><a href="http://test.csswg.org/suites/geometry-1_dev/nightly-unstable/">http://test.csswg.org/suites/geometry-1_dev/nightly-unstable/</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="51803"><a class="p-name fn u-email email" href="mailto:dschulze@adobe.com">Dirk Schulze</a> (<span class="p-org org">Adobe Inc.</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="90243"><a class="p-name fn u-email email" href="mailto:chrishtr@chromium.org">Chris Harrelson</a> (<span class="p-org org">Google Inc.</span>)
     <dt class="editor">Former Editors:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:simonp@opera.com">Simon Pieters</a> (<span class="p-org org">Opera Software AS</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="106988"><a class="p-name fn u-email email" href="mailto:rcabanier@magicleap.com">Rik Cabanier</a> (<span class="p-org org">Magic Leap</span>)
     <dt>Suggest an Edit for this Spec:
     <dd><a href="https://github.com/w3c/fxtf-drafts/blob/master/geometry-1/Overview.bs">GitHub Editor</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/fxtf-drafts/labels/geometry-1">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification provides basic geometric interfaces to represent points, rectangles, quadrilaterals and transformation matrices that can be used by other modules or specifications.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/fxtf-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “geometry” in the title,
	preferably like this:
	“[geometry] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-fxtf-archive/">archived</a>,
	and there is also a <a href="http://lists.w3.org/Archives/Public/public-fx/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a> (part of the <a href="https://www.w3.org/Style/">Style Activity</a>). </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li>
     <a href="#DOMPoint"><span class="secno">2</span> <span class="content">The DOMPoint interfaces</span></a>
     <ol class="toc">
      <li><a href="#transforming-a-point-with-a-matrix"><span class="secno">2.1</span> <span class="content">Transforming a point with a matrix</span></a>
     </ol>
    <li><a href="#DOMRect"><span class="secno">3</span> <span class="content">The DOMRect interfaces</span></a>
    <li><a href="#DOMRectList"><span class="secno">4</span> <span class="content">The DOMRectList interface</span></a>
    <li><a href="#DOMQuad"><span class="secno">5</span> <span class="content">The DOMQuad interface</span></a>
    <li>
     <a href="#DOMMatrix"><span class="secno">6</span> <span class="content">The DOMMatrix interfaces</span></a>
     <ol class="toc">
      <li><a href="#dommatrixinit-dictionary"><span class="secno">6.1</span> <span class="content">DOMMatrix2DInit and DOMMatrixInit dictionaries</span></a>
      <li><a href="#dommatrix-parse"><span class="secno">6.2</span> <span class="content">Parsing a string into an abstract matrix</span></a>
      <li><a href="#dommatrix-create"><span class="secno">6.3</span> <span class="content">Creating DOMMatrixReadOnly and DOMMatrix objects</span></a>
      <li><a href="#dommatrix-attributes"><span class="secno">6.4</span> <span class="content">DOMMatrix attributes</span></a>
      <li><a href="#immutable-transformation-methods"><span class="secno">6.5</span> <span class="content">Immutable transformation methods</span></a>
      <li><a href="#mutable-transformation-methods"><span class="secno">6.6</span> <span class="content">Mutable transformation methods</span></a>
     </ol>
    <li><a href="#structured-serialization"><span class="secno">7</span> <span class="content">Structured serialization</span></a>
    <li><a href="#priv-sec"><span class="secno">8</span> <span class="content">Privacy and Security Considerations</span></a>
    <li>
     <a href="#historical"><span class="secno">9</span> <span class="content">Historical</span></a>
     <ol class="toc">
      <li><a href="#historical-cssom-view"><span class="secno">9.1</span> <span class="content">CSSOM View</span></a>
      <li><a href="#historical-svg"><span class="secno">9.2</span> <span class="content">SVG</span></a>
      <li><a href="#historical-non-standard"><span class="secno">9.3</span> <span class="content">Non-standard</span></a>
     </ol>
    <li><a href="#changes"><span class="secno"></span> <span class="content">Changes since last publication</span></a>
    <li><a href="#acknowledgments"><span class="secno"></span> <span class="content">Acknowledgments</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
<script async data-file-issue-url="https://github.com/w3c/fxtf-drafts/issues/new?title=[geometry]%20" src="https://resources.whatwg.org/file-issue.js"></script>
<script src="../shared/MathJax/MathJax.js?config=MML_SVGorMML,local/local"></script>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>This specification describes several geometry interfaces for the representation of points,
rectangles, quadrilaterals and transformation matrices with the dimension of 3x2 and 4x4.</p>
   <p>The SVG interfaces <code class="idl"><a data-link-type="idl" href="#svgpoint" id="ref-for-svgpoint">SVGPoint</a></code>, <code class="idl"><a data-link-type="idl" href="#svgrect" id="ref-for-svgrect">SVGRect</a></code> and <code class="idl"><a data-link-type="idl" href="#svgmatrix" id="ref-for-svgmatrix">SVGMatrix</a></code> are aliasing the here defined
interfaces in favor for common interfaces used by SVG, Canvas 2D Context and CSS
Transforms. <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a> <a data-link-type="biblio" href="#biblio-html">[HTML]</a> <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
   <h2 class="heading settled" data-level="2" id="DOMPoint"><span class="secno">2. </span><span class="content">The DOMPoint interfaces</span><a class="self-link" href="#DOMPoint"></a></h2>
   <p>A 2D or a 3D <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="point">point</dfn> can be represented by the following WebIDL interfaces:</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable"><c- g>Serializable</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="dompointreadonly"><code><c- g>DOMPointReadOnly</c-></code></dfn> {
    <a class="idl-code" data-link-type="constructor" href="#dom-dompointreadonly-dompointreadonly" id="ref-for-dom-dompointreadonly-dompointreadonly"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMPointReadOnly/DOMPointReadOnly(x, y, z, w), DOMPointReadOnly/constructor(x, y, z, w), DOMPointReadOnly/DOMPointReadOnly(x, y, z), DOMPointReadOnly/constructor(x, y, z), DOMPointReadOnly/DOMPointReadOnly(x, y), DOMPointReadOnly/constructor(x, y), DOMPointReadOnly/DOMPointReadOnly(x), DOMPointReadOnly/constructor(x), DOMPointReadOnly/DOMPointReadOnly(), DOMPointReadOnly/constructor()" data-dfn-type="argument" data-export id="dom-dompointreadonly-dompointreadonly-x-y-z-w-x"><code><c- g>x</c-></code><a class="self-link" href="#dom-dompointreadonly-dompointreadonly-x-y-z-w-x"></a></dfn> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMPointReadOnly/DOMPointReadOnly(x, y, z, w), DOMPointReadOnly/constructor(x, y, z, w), DOMPointReadOnly/DOMPointReadOnly(x, y, z), DOMPointReadOnly/constructor(x, y, z), DOMPointReadOnly/DOMPointReadOnly(x, y), DOMPointReadOnly/constructor(x, y), DOMPointReadOnly/DOMPointReadOnly(x), DOMPointReadOnly/constructor(x), DOMPointReadOnly/DOMPointReadOnly(), DOMPointReadOnly/constructor()" data-dfn-type="argument" data-export id="dom-dompointreadonly-dompointreadonly-x-y-z-w-y"><code><c- g>y</c-></code><a class="self-link" href="#dom-dompointreadonly-dompointreadonly-x-y-z-w-y"></a></dfn> = 0,
            <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMPointReadOnly/DOMPointReadOnly(x, y, z, w), DOMPointReadOnly/constructor(x, y, z, w), DOMPointReadOnly/DOMPointReadOnly(x, y, z), DOMPointReadOnly/constructor(x, y, z), DOMPointReadOnly/DOMPointReadOnly(x, y), DOMPointReadOnly/constructor(x, y), DOMPointReadOnly/DOMPointReadOnly(x), DOMPointReadOnly/constructor(x), DOMPointReadOnly/DOMPointReadOnly(), DOMPointReadOnly/constructor()" data-dfn-type="argument" data-export id="dom-dompointreadonly-dompointreadonly-x-y-z-w-z"><code><c- g>z</c-></code><a class="self-link" href="#dom-dompointreadonly-dompointreadonly-x-y-z-w-z"></a></dfn> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMPointReadOnly/DOMPointReadOnly(x, y, z, w), DOMPointReadOnly/constructor(x, y, z, w), DOMPointReadOnly/DOMPointReadOnly(x, y, z), DOMPointReadOnly/constructor(x, y, z), DOMPointReadOnly/DOMPointReadOnly(x, y), DOMPointReadOnly/constructor(x, y), DOMPointReadOnly/DOMPointReadOnly(x), DOMPointReadOnly/constructor(x), DOMPointReadOnly/DOMPointReadOnly(), DOMPointReadOnly/constructor()" data-dfn-type="argument" data-export id="dom-dompointreadonly-dompointreadonly-x-y-z-w-w"><code><c- g>w</c-></code><a class="self-link" href="#dom-dompointreadonly-dompointreadonly-x-y-z-w-w"></a></dfn> = 1);

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dompointreadonly" id="ref-for-dompointreadonly"><c- n>DOMPointReadOnly</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dompointreadonly-frompoint" id="ref-for-dom-dompointreadonly-frompoint"><c- g>fromPoint</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit"><c- n>DOMPointInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMPointReadOnly/fromPoint(other), DOMPointReadOnly/fromPoint()" data-dfn-type="argument" data-export id="dom-dompointreadonly-frompoint-other-other"><code><c- g>other</c-></code><a class="self-link" href="#dom-dompointreadonly-frompoint-other-other"></a></dfn> = {});

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dompointreadonly-x" id="ref-for-dom-dompointreadonly-x"><c- g>x</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dompointreadonly-y" id="ref-for-dom-dompointreadonly-y"><c- g>y</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dompointreadonly-z" id="ref-for-dom-dompointreadonly-z"><c- g>z</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dompointreadonly-w" id="ref-for-dom-dompointreadonly-w"><c- g>w</c-></a>;

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dompoint" id="ref-for-dompoint"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dompointreadonly-matrixtransform" id="ref-for-dom-dompointreadonly-matrixtransform"><c- g>matrixTransform</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit"><c- n>DOMMatrixInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMPointReadOnly/matrixTransform(matrix), DOMPointReadOnly/matrixTransform()" data-dfn-type="argument" data-export id="dom-dompointreadonly-matrixtransform-matrix-matrix"><code><c- g>matrix</c-></code><a class="self-link" href="#dom-dompointreadonly-matrixtransform-matrix-matrix"></a></dfn> = {});

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object"><c- b>object</c-></a> <dfn class="idl-code" data-dfn-for="DOMPointReadOnly" data-dfn-type="method" data-export data-lt="toJSON()" id="dom-dompointreadonly-tojson"><code><c- g>toJSON</c-></code><a class="self-link" href="#dom-dompointreadonly-tojson"></a></dfn>();
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable①"><c- g>Serializable</c-></a>,
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#LegacyWindowAlias" id="ref-for-LegacyWindowAlias"><c- g>LegacyWindowAlias</c-></a>=<dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="svgpoint"><code><c- n>SVGPoint</c-></code></dfn>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="dompoint"><code><c- g>DOMPoint</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#dompointreadonly" id="ref-for-dompointreadonly①"><c- n>DOMPointReadOnly</c-></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-dompoint-dompoint" id="ref-for-dom-dompoint-dompoint"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMPoint/DOMPoint(x, y, z, w), DOMPoint/constructor(x, y, z, w), DOMPoint/DOMPoint(x, y, z), DOMPoint/constructor(x, y, z), DOMPoint/DOMPoint(x, y), DOMPoint/constructor(x, y), DOMPoint/DOMPoint(x), DOMPoint/constructor(x), DOMPoint/DOMPoint(), DOMPoint/constructor()" data-dfn-type="argument" data-export id="dom-dompoint-dompoint-x-y-z-w-x"><code><c- g>x</c-></code><a class="self-link" href="#dom-dompoint-dompoint-x-y-z-w-x"></a></dfn> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMPoint/DOMPoint(x, y, z, w), DOMPoint/constructor(x, y, z, w), DOMPoint/DOMPoint(x, y, z), DOMPoint/constructor(x, y, z), DOMPoint/DOMPoint(x, y), DOMPoint/constructor(x, y), DOMPoint/DOMPoint(x), DOMPoint/constructor(x), DOMPoint/DOMPoint(), DOMPoint/constructor()" data-dfn-type="argument" data-export id="dom-dompoint-dompoint-x-y-z-w-y"><code><c- g>y</c-></code><a class="self-link" href="#dom-dompoint-dompoint-x-y-z-w-y"></a></dfn> = 0,
            <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMPoint/DOMPoint(x, y, z, w), DOMPoint/constructor(x, y, z, w), DOMPoint/DOMPoint(x, y, z), DOMPoint/constructor(x, y, z), DOMPoint/DOMPoint(x, y), DOMPoint/constructor(x, y), DOMPoint/DOMPoint(x), DOMPoint/constructor(x), DOMPoint/DOMPoint(), DOMPoint/constructor()" data-dfn-type="argument" data-export id="dom-dompoint-dompoint-x-y-z-w-z"><code><c- g>z</c-></code><a class="self-link" href="#dom-dompoint-dompoint-x-y-z-w-z"></a></dfn> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMPoint/DOMPoint(x, y, z, w), DOMPoint/constructor(x, y, z, w), DOMPoint/DOMPoint(x, y, z), DOMPoint/constructor(x, y, z), DOMPoint/DOMPoint(x, y), DOMPoint/constructor(x, y), DOMPoint/DOMPoint(x), DOMPoint/constructor(x), DOMPoint/DOMPoint(), DOMPoint/constructor()" data-dfn-type="argument" data-export id="dom-dompoint-dompoint-x-y-z-w-w"><code><c- g>w</c-></code><a class="self-link" href="#dom-dompoint-dompoint-x-y-z-w-w"></a></dfn> = 1);

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dompoint" id="ref-for-dompoint①"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dompoint-frompoint" id="ref-for-dom-dompoint-frompoint"><c- g>fromPoint</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit①"><c- n>DOMPointInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMPoint/fromPoint(other), DOMPoint/fromPoint()" data-dfn-type="argument" data-export id="dom-dompoint-frompoint-other-other"><code><c- g>other</c-></code><a class="self-link" href="#dom-dompoint-frompoint-other-other"></a></dfn> = {});

    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dompointreadonly-x" id="ref-for-dom-dompointreadonly-x①"><c- g>x</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dompointreadonly-y" id="ref-for-dom-dompointreadonly-y①"><c- g>y</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dompointreadonly-z" id="ref-for-dom-dompointreadonly-z①"><c- g>z</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dompointreadonly-w" id="ref-for-dom-dompointreadonly-w①"><c- g>w</c-></a>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-dompointinit"><code><c- g>DOMPointInit</c-></code></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMPointInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dompointinit-x"><code><c- g>x</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMPointInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dompointinit-y"><code><c- g>y</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMPointInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dompointinit-z"><code><c- g>z</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="1" data-dfn-for="DOMPointInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dompointinit-w"><code><c- g>w</c-></code></dfn> = 1;
};
</pre>
   <p>The following algorithms assume that <code class="idl"><a data-link-type="idl" href="#dompointreadonly" id="ref-for-dompointreadonly②">DOMPointReadOnly</a></code> objects have the internal member
variables <dfn class="dfn-paneled" data-dfn-for="point" data-dfn-type="dfn" data-noexport id="point-x-coordinate">x coordinate</dfn>, <dfn class="dfn-paneled" data-dfn-for="point" data-dfn-type="dfn" data-noexport id="point-y-coordinate">y coordinate</dfn>, <dfn class="dfn-paneled" data-dfn-for="point" data-dfn-type="dfn" data-lt="z coordinate" data-noexport id="point-z-coordinate">z
coordinate</dfn> and <dfn class="dfn-paneled" data-dfn-for="point" data-dfn-type="dfn" data-noexport id="point-w-perspective">w perspective</dfn>. <code class="idl"><a data-link-type="idl" href="#dompointreadonly" id="ref-for-dompointreadonly③">DOMPointReadOnly</a></code> as well as the inheriting interface <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint②">DOMPoint</a></code> must be able to access and set
the value of these variables.</p>
   <p>An interface returning an <code class="idl"><a data-link-type="idl" href="#dompointreadonly" id="ref-for-dompointreadonly④">DOMPointReadOnly</a></code> object by an attribute or function may be able to
modify internal member variable values. Such an interface must specify this ability explicitly in
prose.</p>
   <p>Internal member variables must not be exposed in any way.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMPointReadOnly" data-dfn-type="constructor" data-export data-lt="DOMPointReadOnly(x, y, z, w)|constructor(x, y, z, w)|DOMPointReadOnly(x, y, z)|constructor(x, y, z)|DOMPointReadOnly(x, y)|constructor(x, y)|DOMPointReadOnly(x)|constructor(x)|DOMPointReadOnly()|constructor()" id="dom-dompointreadonly-dompointreadonly"><code>DOMPointReadOnly(<var>x</var>, <var>y</var>, <var>z</var>, <var>w</var>)</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="DOMPoint" data-dfn-type="constructor" data-export data-lt="DOMPoint(x, y, z, w)|constructor(x, y, z, w)|DOMPoint(x, y, z)|constructor(x, y, z)|DOMPoint(x, y)|constructor(x, y)|DOMPoint(x)|constructor(x)|DOMPoint()|constructor()" id="dom-dompoint-dompoint"><code>DOMPoint(<var>x</var>, <var>y</var>, <var>z</var>, <var>w</var>)</code></dfn> constructors, when invoked, must run the following steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>point</var> be a new <code class="idl"><a data-link-type="idl" href="#dompointreadonly" id="ref-for-dompointreadonly⑤">DOMPointReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint③">DOMPoint</a></code> object as appropriate.</p>
    <li data-md>
     <p>Set <var>point</var>’s variables <a data-link-type="dfn" href="#point-x-coordinate" id="ref-for-point-x-coordinate">x coordinate</a> to <var>x</var>, <a data-link-type="dfn" href="#point-y-coordinate" id="ref-for-point-y-coordinate">y coordinate</a> to <var>y</var>, <a data-link-type="dfn" href="#point-z-coordinate" id="ref-for-point-z-coordinate">z coordinate</a> to <var>z</var> and <a data-link-type="dfn" href="#point-w-perspective" id="ref-for-point-w-perspective">w perspective</a> to <var>w</var>.</p>
    <li data-md>
     <p>Return <var>point</var>.</p>
   </ol>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMPointReadOnly" data-dfn-type="method" data-export data-lt="fromPoint(other)|fromPoint()" id="dom-dompointreadonly-frompoint"><code>fromPoint(<var>other</var>)</code></dfn> static method on <code class="idl"><a data-link-type="idl" href="#dompointreadonly" id="ref-for-dompointreadonly⑥">DOMPointReadOnly</a></code> must <a data-link-type="dfn" href="#create-a-dompointreadonly-from-the-dictionary" id="ref-for-create-a-dompointreadonly-from-the-dictionary">create a <code>DOMPointReadOnly</code> from the dictionary</a> <var>other</var>.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMPoint" data-dfn-type="method" data-export data-lt="fromPoint(other)|fromPoint()" id="dom-dompoint-frompoint"><code>fromPoint(<var>other</var>)</code></dfn> static method on <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint④">DOMPoint</a></code> must <a data-link-type="dfn" href="#create-a-dompoint-from-the-dictionary" id="ref-for-create-a-dompoint-from-the-dictionary">create a <code>DOMPoint</code> from the dictionary</a> <var>other</var>.</p>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="create a DOMPointReadOnly from the dictionary" data-noexport id="create-a-dompointreadonly-from-the-dictionary">create a <code>DOMPointReadOnly</code> from a dictionary</dfn> <var>other</var>, or to <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="create a DOMPoint from the
dictionary" data-noexport id="create-a-dompoint-from-the-dictionary">create a <code>DOMPoint</code> from a dictionary</dfn> <var>other</var>, follow these
steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>point</var> be a new <code class="idl"><a data-link-type="idl" href="#dompointreadonly" id="ref-for-dompointreadonly⑦">DOMPointReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint⑤">DOMPoint</a></code> as appropriate.</p>
    <li data-md>
     <p>Set <var>point</var>’s variables <a data-link-type="dfn" href="#point-x-coordinate" id="ref-for-point-x-coordinate①">x coordinate</a> to <var>other</var>’s <code class="idl"><a data-link-type="idl" href="#dom-dompointinit-x" id="ref-for-dom-dompointinit-x">x</a></code> dictionary member, <a data-link-type="dfn" href="#point-y-coordinate" id="ref-for-point-y-coordinate①">y coordinate</a> to <var>other</var>’s <code class="idl"><a data-link-type="idl" href="#dom-dompointinit-y" id="ref-for-dom-dompointinit-y">y</a></code> dictionary member, <a data-link-type="dfn" href="#point-z-coordinate" id="ref-for-point-z-coordinate①">z coordinate</a> to <var>other</var>’s <code class="idl"><a data-link-type="idl" href="#dom-dompointinit-z" id="ref-for-dom-dompointinit-z">z</a></code> dictionary member and <a data-link-type="dfn" href="#point-w-perspective" id="ref-for-point-w-perspective①">w perspective</a> to <var>other</var>’s <code class="idl"><a data-link-type="idl" href="#dom-dompointinit-w" id="ref-for-dom-dompointinit-w">w</a></code> dictionary member. </p>
    <li data-md>
     <p>Return <var>point</var>.</p>
   </ol>
   <div>
     The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMPointReadOnly, DOMPoint" data-dfn-type="attribute" data-export id="dom-dompointreadonly-x"><code>x</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#point-x-coordinate" id="ref-for-point-x-coordinate②">x
    coordinate</a> value. For the <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint⑥">DOMPoint</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dompointreadonly-x" id="ref-for-dom-dompointreadonly-x②">x</a></code> attribute must set the <span id="ref-for-point-x-coordinate③">x coordinate</span> to the new value. 
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMPointReadOnly, DOMPoint" data-dfn-type="attribute" data-export id="dom-dompointreadonly-y"><code>y</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#point-y-coordinate" id="ref-for-point-y-coordinate②">y
    coordinate</a> value. For the <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint⑦">DOMPoint</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dompointreadonly-y" id="ref-for-dom-dompointreadonly-y②">y</a></code> attribute must set the <span id="ref-for-point-y-coordinate③">y coordinate</span> to the new value.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMPointReadOnly, DOMPoint" data-dfn-type="attribute" data-export id="dom-dompointreadonly-z"><code>z</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#point-z-coordinate" id="ref-for-point-z-coordinate②">z
    coordinate</a> value. For the <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint⑧">DOMPoint</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dompointreadonly-z" id="ref-for-dom-dompointreadonly-z②">z</a></code> attribute must set the <span id="ref-for-point-z-coordinate③">z coordinate</span> to the new value.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMPointReadOnly, DOMPoint" data-dfn-type="attribute" data-export id="dom-dompointreadonly-w"><code>w</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#point-w-perspective" id="ref-for-point-w-perspective②">w
    perspective</a> value. For the <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint⑨">DOMPoint</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dompointreadonly-w" id="ref-for-dom-dompointreadonly-w②">w</a></code> attribute must set the <span id="ref-for-point-w-perspective③">w perspective</span> to the new value.</p>
   </div>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMPointReadOnly" data-dfn-type="method" data-export data-lt="matrixTransform(matrix)|matrixTransform()" id="dom-dompointreadonly-matrixtransform"><code>matrixTransform(<var>matrix</var>)</code></dfn> method, when invoked, must run the following steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>matrixObject</var> be the result of invoking <a data-link-type="dfn" href="#create-a-dommatrix-from-the-dictionary" id="ref-for-create-a-dommatrix-from-the-dictionary">create a <code>DOMMatrix</code> from the dictionary</a> <var>matrix</var>.</p>
    <li data-md>
     <p>Return the result of invoking <a data-link-type="dfn" href="#transform-a-point-with-a-matrix" id="ref-for-transform-a-point-with-a-matrix">transform a point with a matrix</a>, given the current
point and <var>matrixObject</var>. The current point does not get modified.</p>
   </ol>
   <div class="example" id="example-81a83758">
    <a class="self-link" href="#example-81a83758"></a> In this example the method <code class="idl"><a data-link-type="idl" href="#dom-dompointreadonly-matrixtransform" id="ref-for-dom-dompointreadonly-matrixtransform①">matrixTransform()</a></code> on a <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint①⓪">DOMPoint</a></code> instance is
called with a <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix">DOMMatrix</a></code> instance as argument. 
<pre><code class="highlight"><c- a>var</c-> point <c- o>=</c-> <c- k>new</c-> DOMPoint<c- p>(</c-><c- mi>5</c-><c- p>,</c-> <c- mi>4</c-><c- p>);</c->
<c- a>var</c-> matrix <c- o>=</c-> <c- k>new</c-> DOMMatrix<c- p>([</c-><c- mi>2</c-><c- p>,</c-> <c- mi>0</c-><c- p>,</c-> <c- mi>0</c-><c- p>,</c-> <c- mi>2</c-><c- p>,</c-> <c- mi>10</c-><c- p>,</c-> <c- mi>10</c-><c- p>]);</c->
<c- a>var</c-> transformedPoint <c- o>=</c-> point<c- p>.</c->matrixTransform<c- p>(</c->matrix<c- p>);</c->
</code></pre>
    <p>The <var>point</var> variable is set to a new <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint①①">DOMPoint</a></code> object with <a data-link-type="dfn" href="#point-x-coordinate" id="ref-for-point-x-coordinate④">x
coordinate</a> initialized to 5 and <a data-link-type="dfn" href="#point-y-coordinate" id="ref-for-point-y-coordinate④">y coordinate</a> initialized to 4. This new <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint①②">DOMPoint</a></code> is now scaled and the translated by <var>matrix</var>. This resulting <var>transformedPoint</var> has the <span id="ref-for-point-x-coordinate⑤">x coordinate</span> 20 and <span id="ref-for-point-y-coordinate⑤">y
coordinate</span> 18.</p>
   </div>
   <h3 class="heading settled" data-level="2.1" id="transforming-a-point-with-a-matrix"><span class="secno">2.1. </span><span class="content">Transforming a point with a matrix</span><a class="self-link" href="#transforming-a-point-with-a-matrix"></a></h3>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="transform-a-point-with-a-matrix">transform a <a data-link-type="dfn" href="#point" id="ref-for-point">point</a> with a <a data-link-type="dfn" href="#matrix" id="ref-for-matrix">matrix</a></dfn>, given <var>point</var> and <var>matrix</var>:</p>
   <ol>
    <li data-md>
     <p>Let <var>x</var> be <var>point</var>’s <a data-link-type="dfn" href="#point-x-coordinate" id="ref-for-point-x-coordinate⑥">x coordinate</a>.</p>
    <li data-md>
     <p>Let <var>y</var> be <var>point</var>’s <a data-link-type="dfn" href="#point-y-coordinate" id="ref-for-point-y-coordinate⑥">y coordinate</a>.</p>
    <li data-md>
     <p>Let <var>z</var> be <var>point</var>’s <a data-link-type="dfn" href="#point-z-coordinate" id="ref-for-point-z-coordinate④">z coordinate</a>.</p>
    <li data-md>
     <p>Let <var>w</var> be <var>point</var>’s <a data-link-type="dfn" href="#point-w-perspective" id="ref-for-point-w-perspective④">w perspective</a>.</p>
    <li data-md>
     <p>Let <var>pointVector</var> be a new column vector with the elements being <var>x</var>, <var>y</var>, <var>z</var>, and <var>w</var>, respectively.</p>
     <math display="inline">
      <mrow>
       <mfenced close="]" open="[">
        <mrow>
         <mtable>
          <mtr>
           <mtd>
            <mi>x</mi>
           </mtd>
          </mtr>
          <mtr>
           <mtd>
            <mi>y</mi>
           </mtd>
          </mtr>
          <mtr>
           <mtd>
            <mi>z</mi>
           </mtd>
          </mtr>
          <mtr>
           <mtd>
            <mi>w</mi>
           </mtd>
          </mtr>
         </mtable>
        </mrow>
       </mfenced>
      </mrow>
     </math>
    <li data-md>
     <p>Set <var>pointVector</var> to <var>pointVector</var> <a data-link-type="dfn" href="#post-multiply" id="ref-for-post-multiply">post-multiplied</a> by <var>matrix</var>.</p>
    <li data-md>
     <p>Let <var>transformedPoint</var> be a new <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint①③">DOMPoint</a></code> object.</p>
    <li data-md>
     <p>Set <var>transformedPoint</var>’s <a data-link-type="dfn" href="#point-x-coordinate" id="ref-for-point-x-coordinate⑦">x coordinate</a> to <var>pointVector</var>’s
first element.</p>
    <li data-md>
     <p>Set <var>transformedPoint</var>’s <a data-link-type="dfn" href="#point-y-coordinate" id="ref-for-point-y-coordinate⑦">y coordinate</a> to <var>pointVector</var>’s
second element.</p>
    <li data-md>
     <p>Set <var>transformedPoint</var>’s <a data-link-type="dfn" href="#point-z-coordinate" id="ref-for-point-z-coordinate⑤">z coordinate</a> to <var>pointVector</var>’s
third element.</p>
    <li data-md>
     <p>Set <var>transformedPoint</var>’s <a data-link-type="dfn" href="#point-w-perspective" id="ref-for-point-w-perspective⑤">w perspective</a> to <var>pointVector</var>’s
fourth element.</p>
    <li data-md>
     <p>Return <var>transformedPoint</var>.</p>
   </ol>
   <p class="note" role="note"><span>Note:</span> If <var>matrix</var>’s <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d">is 2D</a> is true, <var>point</var>’s <a data-link-type="dfn" href="#point-z-coordinate" id="ref-for-point-z-coordinate⑥">z coordinate</a> is <span class="css">0</span> or <span class="css">-0</span>, and <var>point</var>’s <a data-link-type="dfn" href="#point-w-perspective" id="ref-for-point-w-perspective⑥">w perspective</a> is <span class="css">1</span>, then this is a 2D transformation. Otherwise this is a 3D transformation.</p>
   <h2 class="heading settled" data-level="3" id="DOMRect"><span class="secno">3. </span><span class="content">The DOMRect interfaces</span><a class="self-link" href="#DOMRect"></a></h2>
   <p>Objects implementing the <code class="idl"><a data-link-type="idl" href="#domrectreadonly" id="ref-for-domrectreadonly">DOMRectReadOnly</a></code> interface represent a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="rectangle">rectangle</dfn>.</p>
   <p><a data-link-type="dfn" href="#rectangle" id="ref-for-rectangle">Rectangles</a> have the following properties:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="rectangle" data-dfn-type="dfn" data-noexport id="rectangle-origin">origin</dfn>
    <dd data-md>
     <p>When the rectangle has a non-negative <a data-link-type="dfn" href="#rectangle-width-dimension" id="ref-for-rectangle-width-dimension">width dimension</a>, the rectangle’s
horizontal origin is the left edge; otherwise, it is the right edge. Similarly, when the rectangle
has a non-negative <a data-link-type="dfn" href="#rectangle-height-dimension" id="ref-for-rectangle-height-dimension">height dimension</a>, the rectangle’s vertical origin is the
top edge; otherwise, it is the bottom edge.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="rectangle" data-dfn-type="dfn" data-noexport id="rectangle-x-coordinate">x coordinate</dfn>
    <dd data-md>
     <p>The horizontal distance between the viewport’s left edge and the rectangle’s <a data-link-type="dfn" href="#rectangle-origin" id="ref-for-rectangle-origin">origin</a>.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="rectangle" data-dfn-type="dfn" data-noexport id="rectangle-y-coordinate">y coordinate</dfn>
    <dd data-md>
     <p>The vertical distance between the viewport’s top edge and the rectangle’s <a data-link-type="dfn" href="#rectangle-origin" id="ref-for-rectangle-origin①">origin</a>.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="rectangle" data-dfn-type="dfn" data-noexport id="rectangle-width-dimension">width dimension</dfn>
    <dd data-md>
     <p>The width of the rectangle. Can be negative.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="rectangle" data-dfn-type="dfn" data-noexport id="rectangle-height-dimension">height dimension</dfn>
    <dd data-md>
     <p>The height of the rectangle. Can be negative.</p>
   </dl>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable②"><c- g>Serializable</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="domrectreadonly"><code><c- g>DOMRectReadOnly</c-></code></dfn> {
    <a class="idl-code" data-link-type="constructor" href="#dom-domrectreadonly-domrectreadonly" id="ref-for-dom-domrectreadonly-domrectreadonly"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectReadOnly/DOMRectReadOnly(x, y, width, height), DOMRectReadOnly/constructor(x, y, width, height), DOMRectReadOnly/DOMRectReadOnly(x, y, width), DOMRectReadOnly/constructor(x, y, width), DOMRectReadOnly/DOMRectReadOnly(x, y), DOMRectReadOnly/constructor(x, y), DOMRectReadOnly/DOMRectReadOnly(x), DOMRectReadOnly/constructor(x), DOMRectReadOnly/DOMRectReadOnly(), DOMRectReadOnly/constructor()" data-dfn-type="argument" data-export id="dom-domrectreadonly-domrectreadonly-x-y-width-height-x"><code><c- g>x</c-></code><a class="self-link" href="#dom-domrectreadonly-domrectreadonly-x-y-width-height-x"></a></dfn> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectReadOnly/DOMRectReadOnly(x, y, width, height), DOMRectReadOnly/constructor(x, y, width, height), DOMRectReadOnly/DOMRectReadOnly(x, y, width), DOMRectReadOnly/constructor(x, y, width), DOMRectReadOnly/DOMRectReadOnly(x, y), DOMRectReadOnly/constructor(x, y), DOMRectReadOnly/DOMRectReadOnly(x), DOMRectReadOnly/constructor(x), DOMRectReadOnly/DOMRectReadOnly(), DOMRectReadOnly/constructor()" data-dfn-type="argument" data-export id="dom-domrectreadonly-domrectreadonly-x-y-width-height-y"><code><c- g>y</c-></code><a class="self-link" href="#dom-domrectreadonly-domrectreadonly-x-y-width-height-y"></a></dfn> = 0,
            <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②②"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectReadOnly/DOMRectReadOnly(x, y, width, height), DOMRectReadOnly/constructor(x, y, width, height), DOMRectReadOnly/DOMRectReadOnly(x, y, width), DOMRectReadOnly/constructor(x, y, width), DOMRectReadOnly/DOMRectReadOnly(x, y), DOMRectReadOnly/constructor(x, y), DOMRectReadOnly/DOMRectReadOnly(x), DOMRectReadOnly/constructor(x), DOMRectReadOnly/DOMRectReadOnly(), DOMRectReadOnly/constructor()" data-dfn-type="argument" data-export id="dom-domrectreadonly-domrectreadonly-x-y-width-height-width"><code><c- g>width</c-></code><a class="self-link" href="#dom-domrectreadonly-domrectreadonly-x-y-width-height-width"></a></dfn> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②③"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectReadOnly/DOMRectReadOnly(x, y, width, height), DOMRectReadOnly/constructor(x, y, width, height), DOMRectReadOnly/DOMRectReadOnly(x, y, width), DOMRectReadOnly/constructor(x, y, width), DOMRectReadOnly/DOMRectReadOnly(x, y), DOMRectReadOnly/constructor(x, y), DOMRectReadOnly/DOMRectReadOnly(x), DOMRectReadOnly/constructor(x), DOMRectReadOnly/DOMRectReadOnly(), DOMRectReadOnly/constructor()" data-dfn-type="argument" data-export id="dom-domrectreadonly-domrectreadonly-x-y-width-height-height"><code><c- g>height</c-></code><a class="self-link" href="#dom-domrectreadonly-domrectreadonly-x-y-width-height-height"></a></dfn> = 0);

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject③"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#domrectreadonly" id="ref-for-domrectreadonly①"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="method" href="#dom-domrectreadonly-fromrect" id="ref-for-dom-domrectreadonly-fromrect"><c- g>fromRect</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-domrectinit" id="ref-for-dictdef-domrectinit"><c- n>DOMRectInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectReadOnly/fromRect(other), DOMRectReadOnly/fromRect()" data-dfn-type="argument" data-export id="dom-domrectreadonly-fromrect-other-other"><code><c- g>other</c-></code><a class="self-link" href="#dom-domrectreadonly-fromrect-other-other"></a></dfn> = {});

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②④"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectReadOnly" data-dfn-type="attribute" data-export data-readonly data-type="unrestricted double" id="dom-domrectreadonly-x"><code><c- g>x</c-></code><a class="self-link" href="#dom-domrectreadonly-x"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectReadOnly" data-dfn-type="attribute" data-export data-readonly data-type="unrestricted double" id="dom-domrectreadonly-y"><code><c- g>y</c-></code><a class="self-link" href="#dom-domrectreadonly-y"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectReadOnly" data-dfn-type="attribute" data-export data-readonly data-type="unrestricted double" id="dom-domrectreadonly-width"><code><c- g>width</c-></code><a class="self-link" href="#dom-domrectreadonly-width"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectReadOnly" data-dfn-type="attribute" data-export data-readonly data-type="unrestricted double" id="dom-domrectreadonly-height"><code><c- g>height</c-></code><a class="self-link" href="#dom-domrectreadonly-height"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectReadOnly" data-dfn-type="attribute" data-export data-readonly data-type="unrestricted double" id="dom-domrectreadonly-top"><code><c- g>top</c-></code><a class="self-link" href="#dom-domrectreadonly-top"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectReadOnly" data-dfn-type="attribute" data-export data-readonly data-type="unrestricted double" id="dom-domrectreadonly-right"><code><c- g>right</c-></code><a class="self-link" href="#dom-domrectreadonly-right"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectReadOnly" data-dfn-type="attribute" data-export data-readonly data-type="unrestricted double" id="dom-domrectreadonly-bottom"><code><c- g>bottom</c-></code><a class="self-link" href="#dom-domrectreadonly-bottom"></a></dfn>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectReadOnly" data-dfn-type="attribute" data-export data-readonly data-type="unrestricted double" id="dom-domrectreadonly-left"><code><c- g>left</c-></code><a class="self-link" href="#dom-domrectreadonly-left"></a></dfn>;

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default①"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object①"><c- b>object</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectReadOnly" data-dfn-type="method" data-export data-lt="toJSON()" id="dom-domrectreadonly-tojson"><code><c- g>toJSON</c-></code><a class="self-link" href="#dom-domrectreadonly-tojson"></a></dfn>();
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable③"><c- g>Serializable</c-></a>,
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#LegacyWindowAlias" id="ref-for-LegacyWindowAlias①"><c- g>LegacyWindowAlias</c-></a>=<dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="svgrect"><code><c- n>SVGRect</c-></code></dfn>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="domrect"><code><c- g>DOMRect</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#domrectreadonly" id="ref-for-domrectreadonly②"><c- n>DOMRectReadOnly</c-></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-domrect-domrect" id="ref-for-dom-domrect-domrect"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③②"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRect/DOMRect(x, y, width, height), DOMRect/constructor(x, y, width, height), DOMRect/DOMRect(x, y, width), DOMRect/constructor(x, y, width), DOMRect/DOMRect(x, y), DOMRect/constructor(x, y), DOMRect/DOMRect(x), DOMRect/constructor(x), DOMRect/DOMRect(), DOMRect/constructor()" data-dfn-type="argument" data-export id="dom-domrect-domrect-x-y-width-height-x"><code><c- g>x</c-></code><a class="self-link" href="#dom-domrect-domrect-x-y-width-height-x"></a></dfn> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③③"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRect/DOMRect(x, y, width, height), DOMRect/constructor(x, y, width, height), DOMRect/DOMRect(x, y, width), DOMRect/constructor(x, y, width), DOMRect/DOMRect(x, y), DOMRect/constructor(x, y), DOMRect/DOMRect(x), DOMRect/constructor(x), DOMRect/DOMRect(), DOMRect/constructor()" data-dfn-type="argument" data-export id="dom-domrect-domrect-x-y-width-height-y"><code><c- g>y</c-></code><a class="self-link" href="#dom-domrect-domrect-x-y-width-height-y"></a></dfn> = 0,
            <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③④"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRect/DOMRect(x, y, width, height), DOMRect/constructor(x, y, width, height), DOMRect/DOMRect(x, y, width), DOMRect/constructor(x, y, width), DOMRect/DOMRect(x, y), DOMRect/constructor(x, y), DOMRect/DOMRect(x), DOMRect/constructor(x), DOMRect/DOMRect(), DOMRect/constructor()" data-dfn-type="argument" data-export id="dom-domrect-domrect-x-y-width-height-width"><code><c- g>width</c-></code><a class="self-link" href="#dom-domrect-domrect-x-y-width-height-width"></a></dfn> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMRect/DOMRect(x, y, width, height), DOMRect/constructor(x, y, width, height), DOMRect/DOMRect(x, y, width), DOMRect/constructor(x, y, width), DOMRect/DOMRect(x, y), DOMRect/constructor(x, y), DOMRect/DOMRect(x), DOMRect/constructor(x), DOMRect/DOMRect(), DOMRect/constructor()" data-dfn-type="argument" data-export id="dom-domrect-domrect-x-y-width-height-height"><code><c- g>height</c-></code><a class="self-link" href="#dom-domrect-domrect-x-y-width-height-height"></a></dfn> = 0);

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject④"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#domrect" id="ref-for-domrect"><c- n>DOMRect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-domrect-fromrect" id="ref-for-dom-domrect-fromrect"><c- g>fromRect</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-domrectinit" id="ref-for-dictdef-domrectinit①"><c- n>DOMRectInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMRect/fromRect(other), DOMRect/fromRect()" data-dfn-type="argument" data-export id="dom-domrect-fromrect-other-other"><code><c- g>other</c-></code><a class="self-link" href="#dom-domrect-fromrect-other-other"></a></dfn> = {});

    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMRect" data-dfn-type="attribute" data-export data-type="unrestricted double" id="dom-domrect-x"><code><c- g>x</c-></code></dfn>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMRect" data-dfn-type="attribute" data-export data-type="unrestricted double" id="dom-domrect-y"><code><c- g>y</c-></code></dfn>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMRect" data-dfn-type="attribute" data-export data-type="unrestricted double" id="dom-domrect-width"><code><c- g>width</c-></code></dfn>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMRect" data-dfn-type="attribute" data-export data-type="unrestricted double" id="dom-domrect-height"><code><c- g>height</c-></code></dfn>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-domrectinit"><code><c- g>DOMRectInit</c-></code></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMRectInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-domrectinit-x"><code><c- g>x</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMRectInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-domrectinit-y"><code><c- g>y</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④②"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMRectInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-domrectinit-width"><code><c- g>width</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④③"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMRectInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-domrectinit-height"><code><c- g>height</c-></code></dfn> = 0;
};
</pre>
   <p>The following algorithms assume that <code class="idl"><a data-link-type="idl" href="#domrectreadonly" id="ref-for-domrectreadonly③">DOMRectReadOnly</a></code> objects have the internal member
variables <a data-link-type="dfn" href="#rectangle-x-coordinate" id="ref-for-rectangle-x-coordinate">x coordinate</a>, <a data-link-type="dfn" href="#rectangle-y-coordinate" id="ref-for-rectangle-y-coordinate">y coordinate</a>, <a data-link-type="dfn" href="#rectangle-width-dimension" id="ref-for-rectangle-width-dimension①">width dimension</a> and <a data-link-type="dfn" href="#rectangle-height-dimension" id="ref-for-rectangle-height-dimension①">height dimension</a>. <code class="idl"><a data-link-type="idl" href="#domrectreadonly" id="ref-for-domrectreadonly④">DOMRectReadOnly</a></code> as
well as the inheriting interface <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect①">DOMRect</a></code> must be able to access and set the value of these
variables.</p>
   <p>An interface returning an <code class="idl"><a data-link-type="idl" href="#domrectreadonly" id="ref-for-domrectreadonly⑤">DOMRectReadOnly</a></code> object by an attribute or function may be able to
modify internal member variable values. Such an interface must specify this ability explicitly in
prose.</p>
   <p>Internal member variables must not be exposed in any way.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMRectReadOnly" data-dfn-type="constructor" data-export data-lt="DOMRectReadOnly(x, y, width, height)|constructor(x, y, width, height)|DOMRectReadOnly(x, y, width)|constructor(x, y, width)|DOMRectReadOnly(x, y)|constructor(x, y)|DOMRectReadOnly(x)|constructor(x)|DOMRectReadOnly()|constructor()" id="dom-domrectreadonly-domrectreadonly"><code>DOMRectReadOnly(<var>x</var>, <var>y</var>, <var>width</var>, <var>height</var>)</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="DOMRect" data-dfn-type="constructor" data-export data-lt="DOMRect(x, y, width, height)|constructor(x, y, width, height)|DOMRect(x, y, width)|constructor(x, y, width)|DOMRect(x, y)|constructor(x, y)|DOMRect(x)|constructor(x)|DOMRect()|constructor()" id="dom-domrect-domrect"><code>DOMRect(<var>x</var>, <var>y</var>, <var>width</var>, <var>height</var>)</code></dfn> constructors, when invoked, must run the following steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>rect</var> be a new <code class="idl"><a data-link-type="idl" href="#domrectreadonly" id="ref-for-domrectreadonly⑥">DOMRectReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect②">DOMRect</a></code> object as appropriate.</p>
    <li data-md>
     <p>Set <var>rect</var>’s variables <a data-link-type="dfn" href="#rectangle-x-coordinate" id="ref-for-rectangle-x-coordinate①">x coordinate</a> to <var>x</var>, <a data-link-type="dfn" href="#rectangle-y-coordinate" id="ref-for-rectangle-y-coordinate①">y coordinate</a> to <var>y</var>, <a data-link-type="dfn" href="#rectangle-width-dimension" id="ref-for-rectangle-width-dimension②">width dimension</a> to <var>width</var> and <a data-link-type="dfn" href="#rectangle-height-dimension" id="ref-for-rectangle-height-dimension②">height dimension</a> to <var>height</var>.</p>
    <li data-md>
     <p>Return <var>rect</var>.</p>
   </ol>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMRectReadOnly" data-dfn-type="method" data-export data-lt="fromRect(other)|fromRect()" id="dom-domrectreadonly-fromrect"><code>fromRect(<var>other</var>)</code></dfn> static method on <code class="idl"><a data-link-type="idl" href="#domrectreadonly" id="ref-for-domrectreadonly⑦">DOMRectReadOnly</a></code> must <a data-link-type="dfn" href="#create-a-domrectreadonly-from-the-dictionary" id="ref-for-create-a-domrectreadonly-from-the-dictionary">create a <code>DOMRectReadOnly</code> from the dictionary</a> <var>other</var>.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMRect" data-dfn-type="method" data-export data-lt="fromRect(other)|fromRect()" id="dom-domrect-fromrect"><code>fromRect(<var>other</var>)</code></dfn> static method on <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect③">DOMRect</a></code> must <a data-link-type="dfn" href="#create-a-domrect-from-the-dictionary" id="ref-for-create-a-domrect-from-the-dictionary">create a <code>DOMRect</code> from the dictionary</a> <var>other</var>.</p>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="create a DOMRectReadOnly from the dictionary" data-noexport id="create-a-domrectreadonly-from-the-dictionary">create a <code>DOMRectReadOnly</code> from a dictionary</dfn> <var>other</var>, or to <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="create a DOMRect from the
dictionary" data-noexport id="create-a-domrect-from-the-dictionary">create a <code>DOMRect</code> from a dictionary</dfn> <var>other</var>, follow these
steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>rect</var> be a new <code class="idl"><a data-link-type="idl" href="#domrectreadonly" id="ref-for-domrectreadonly⑧">DOMRectReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect④">DOMRect</a></code> as appropriate.</p>
    <li data-md>
     <p>Set <var>rect</var>’s variables <a data-link-type="dfn" href="#rectangle-x-coordinate" id="ref-for-rectangle-x-coordinate②">x coordinate</a> to <var>other</var>’s <code class="idl"><a data-link-type="idl" href="#dom-domrectinit-x" id="ref-for-dom-domrectinit-x">x</a></code> dictionary member, <a data-link-type="dfn" href="#rectangle-y-coordinate" id="ref-for-rectangle-y-coordinate②">y coordinate</a> to <var>other</var>’s <code class="idl"><a data-link-type="idl" href="#dom-domrectinit-y" id="ref-for-dom-domrectinit-y">y</a></code> dictionary member, <a data-link-type="dfn" href="#rectangle-width-dimension" id="ref-for-rectangle-width-dimension③">width dimension</a> to <var>other</var>’s <code class="idl"><a data-link-type="idl" href="#dom-domrectinit-width" id="ref-for-dom-domrectinit-width">width</a></code> dictionary member and <a data-link-type="dfn" href="#rectangle-height-dimension" id="ref-for-rectangle-height-dimension③">height dimension</a> to <var>other</var>’s <code class="idl"><a data-link-type="idl" href="#dom-domrectinit-height" id="ref-for-dom-domrectinit-height">height</a></code> dictionary member.</p>
    <li data-md>
     <p>Return <var>rect</var>.</p>
   </ol>
   <div>
     The <dfn class="idl-code" data-dfn-for="DOMRectReadOnly DOMRect" data-dfn-type="attribute" data-export id="dom-domrectreadonly-domrect-x"><code>x</code><a class="self-link" href="#dom-domrectreadonly-domrect-x"></a></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#rectangle-x-coordinate" id="ref-for-rectangle-x-coordinate③">x
coordinate</a> value. For the <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect⑤">DOMRect</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-domrect-x" id="ref-for-dom-domrect-x">x</a></code> attribute must set the <span id="ref-for-rectangle-x-coordinate④">x coordinate</span> to the new value. 
    <p>The <dfn class="idl-code" data-dfn-for="DOMRectReadOnly DOMRect" data-dfn-type="attribute" data-export id="dom-domrectreadonly-domrect-y"><code>y</code><a class="self-link" href="#dom-domrectreadonly-domrect-y"></a></dfn> attribute, on getting, it must return the <a data-link-type="dfn" href="#rectangle-y-coordinate" id="ref-for-rectangle-y-coordinate③">y
coordinate</a> value. For the <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect⑥">DOMRect</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-domrect-y" id="ref-for-dom-domrect-y">y</a></code> attribute must set the <span id="ref-for-rectangle-y-coordinate④">y coordinate</span> to the new value.</p>
    <p>The <dfn class="idl-code" data-dfn-for="DOMRectReadOnly DOMRect" data-dfn-type="attribute" data-export id="dom-domrectreadonly-domrect-width"><code>width</code><a class="self-link" href="#dom-domrectreadonly-domrect-width"></a></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#rectangle-width-dimension" id="ref-for-rectangle-width-dimension④">width
dimension</a> value. For the <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect⑦">DOMRect</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-domrect-width" id="ref-for-dom-domrect-width">width</a></code> attribute must set the <span id="ref-for-rectangle-width-dimension⑤">width dimension</span> to the new value.</p>
    <p>The <dfn class="idl-code" data-dfn-for="DOMRectReadOnly DOMRect" data-dfn-type="attribute" data-export id="dom-domrectreadonly-domrect-height"><code>height</code><a class="self-link" href="#dom-domrectreadonly-domrect-height"></a></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#rectangle-height-dimension" id="ref-for-rectangle-height-dimension④">height dimension</a> value. For the <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect⑧">DOMRect</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-domrect-height" id="ref-for-dom-domrect-height">height</a></code> attribute must set the <span id="ref-for-rectangle-height-dimension⑤">height dimension</span> value to the new
value.</p>
    <p>The <dfn class="idl-code" data-dfn-for="DOMRectReadOnly DOMRect" data-dfn-type="attribute" data-export id="dom-domrectreadonly-domrect-top"><code>top</code><a class="self-link" href="#dom-domrectreadonly-domrect-top"></a></dfn> attribute, on getting, must return min(<a data-link-type="dfn" href="#rectangle-y-coordinate" id="ref-for-rectangle-y-coordinate⑤">y
coordinate</a>, <span id="ref-for-rectangle-y-coordinate⑥">y coordinate</span> + <a data-link-type="dfn" href="#rectangle-height-dimension" id="ref-for-rectangle-height-dimension⑥">height dimension</a>).</p>
    <p>The <dfn class="idl-code" data-dfn-for="DOMRectReadOnly DOMRect" data-dfn-type="attribute" data-export id="dom-domrectreadonly-domrect-right"><code>right</code><a class="self-link" href="#dom-domrectreadonly-domrect-right"></a></dfn> attribute, on getting, must return max(<a data-link-type="dfn" href="#rectangle-x-coordinate" id="ref-for-rectangle-x-coordinate⑤">x
coordinate</a>, <span id="ref-for-rectangle-x-coordinate⑥">x coordinate</span> + <a data-link-type="dfn" href="#rectangle-width-dimension" id="ref-for-rectangle-width-dimension⑥">width dimension</a>).</p>
    <p>The <dfn class="idl-code" data-dfn-for="DOMRectReadOnly DOMRect" data-dfn-type="attribute" data-export id="dom-domrectreadonly-domrect-bottom"><code>bottom</code><a class="self-link" href="#dom-domrectreadonly-domrect-bottom"></a></dfn> attribute, on getting, must return max(<a data-link-type="dfn" href="#rectangle-y-coordinate" id="ref-for-rectangle-y-coordinate⑦">y
coordinate</a>, <span id="ref-for-rectangle-y-coordinate⑧">y coordinate</span> + <a data-link-type="dfn" href="#rectangle-height-dimension" id="ref-for-rectangle-height-dimension⑦">height dimension</a>).</p>
    <p>The <dfn class="idl-code" data-dfn-for="DOMRectReadOnly DOMRect" data-dfn-type="attribute" data-export id="dom-domrectreadonly-domrect-left"><code>left</code><a class="self-link" href="#dom-domrectreadonly-domrect-left"></a></dfn> attribute, on getting, must return min(<a data-link-type="dfn" href="#rectangle-x-coordinate" id="ref-for-rectangle-x-coordinate⑦">x
coordinate</a>, <span id="ref-for-rectangle-x-coordinate⑧">x coordinate</span> + <a data-link-type="dfn" href="#rectangle-width-dimension" id="ref-for-rectangle-width-dimension⑦">width dimension</a>).</p>
   </div>
   <h2 class="heading settled" data-level="4" id="DOMRectList"><span class="secno">4. </span><span class="content">The DOMRectList interface</span><a class="self-link" href="#DOMRectList"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed④"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="domrectlist"><code><c- g>DOMRectList</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-domrectlist-length" id="ref-for-dom-domrectlist-length"><c- g>length</c-></a>;
    <c- b>getter</c-> <a class="n" data-link-type="idl-name" href="#domrect" id="ref-for-domrect⑨"><c- n>DOMRect</c-></a>? <a class="idl-code" data-link-type="method" href="#dom-domrectlist-item" id="ref-for-dom-domrectlist-item"><c- g>item</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①"><c- b>unsigned</c-> <c- b>long</c-></a> <dfn class="idl-code" data-dfn-for="DOMRectList/item(index)" data-dfn-type="argument" data-export id="dom-domrectlist-item-index-index"><code><c- g>index</c-></code><a class="self-link" href="#dom-domrectlist-item-index-index"></a></dfn>);
};
</pre>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMRectList" data-dfn-type="attribute" data-export id="dom-domrectlist-length"><code>length</code></dfn> attribute must return the total
number of <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect①⓪">DOMRect</a></code> objects associated with the object.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMRectList" data-dfn-type="method" data-export id="dom-domrectlist-item"><code>item(<var>index</var>)</code></dfn> method, when invoked, must
return <span class="css">null</span> when <var>index</var> is greater than or equal to the number of <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect①①">DOMRect</a></code> objects
associated with the <code class="idl"><a data-link-type="idl" href="#domrectlist" id="ref-for-domrectlist">DOMRectList</a></code>. Otherwise, the <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect①②">DOMRect</a></code> object at <var>index</var> must be
returned. Indices are zero-based.</p>
   <p><strong class="advisement"> <code class="idl"><a data-link-type="idl" href="#domrectlist" id="ref-for-domrectlist①">DOMRectList</a></code> only exists for compatibility with legacy Web content. When specifying a
new API, <code class="idl"><a data-link-type="idl" href="#domrectlist" id="ref-for-domrectlist②">DOMRectList</a></code> must not be used. Use <code>sequence&lt;DOMRect></code> instead. <a data-link-type="biblio" href="#biblio-webidl">[WEBIDL]</a></strong></p>
   <h2 class="heading settled" data-level="5" id="DOMQuad"><span class="secno">5. </span><span class="content">The DOMQuad interface</span><a class="self-link" href="#DOMQuad"></a></h2>
   <p>Objects implementing the <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad">DOMQuad</a></code> interface represents a <dfn data-dfn-type="dfn" data-export id="quadrilateral">quadrilateral<a class="self-link" href="#quadrilateral"></a></dfn>.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑤"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable④"><c- g>Serializable</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="domquad"><code><c- g>DOMQuad</c-></code></dfn> {
    <a class="idl-code" data-link-type="constructor" href="#dom-domquad-domquad" id="ref-for-dom-domquad-domquad"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit②"><c- n>DOMPointInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMQuad/DOMQuad(p1, p2, p3, p4), DOMQuad/constructor(p1, p2, p3, p4), DOMQuad/DOMQuad(p1, p2, p3), DOMQuad/constructor(p1, p2, p3), DOMQuad/DOMQuad(p1, p2), DOMQuad/constructor(p1, p2), DOMQuad/DOMQuad(p1), DOMQuad/constructor(p1), DOMQuad/DOMQuad(), DOMQuad/constructor()" data-dfn-type="argument" data-export id="dom-domquad-domquad-p1-p2-p3-p4-p1"><code><c- g>p1</c-></code><a class="self-link" href="#dom-domquad-domquad-p1-p2-p3-p4-p1"></a></dfn> = {}, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit③"><c- n>DOMPointInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMQuad/DOMQuad(p1, p2, p3, p4), DOMQuad/constructor(p1, p2, p3, p4), DOMQuad/DOMQuad(p1, p2, p3), DOMQuad/constructor(p1, p2, p3), DOMQuad/DOMQuad(p1, p2), DOMQuad/constructor(p1, p2), DOMQuad/DOMQuad(p1), DOMQuad/constructor(p1), DOMQuad/DOMQuad(), DOMQuad/constructor()" data-dfn-type="argument" data-export id="dom-domquad-domquad-p1-p2-p3-p4-p2"><code><c- g>p2</c-></code><a class="self-link" href="#dom-domquad-domquad-p1-p2-p3-p4-p2"></a></dfn> = {},
            <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit④"><c- n>DOMPointInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMQuad/DOMQuad(p1, p2, p3, p4), DOMQuad/constructor(p1, p2, p3, p4), DOMQuad/DOMQuad(p1, p2, p3), DOMQuad/constructor(p1, p2, p3), DOMQuad/DOMQuad(p1, p2), DOMQuad/constructor(p1, p2), DOMQuad/DOMQuad(p1), DOMQuad/constructor(p1), DOMQuad/DOMQuad(), DOMQuad/constructor()" data-dfn-type="argument" data-export id="dom-domquad-domquad-p1-p2-p3-p4-p3"><code><c- g>p3</c-></code><a class="self-link" href="#dom-domquad-domquad-p1-p2-p3-p4-p3"></a></dfn> = {}, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit⑤"><c- n>DOMPointInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMQuad/DOMQuad(p1, p2, p3, p4), DOMQuad/constructor(p1, p2, p3, p4), DOMQuad/DOMQuad(p1, p2, p3), DOMQuad/constructor(p1, p2, p3), DOMQuad/DOMQuad(p1, p2), DOMQuad/constructor(p1, p2), DOMQuad/DOMQuad(p1), DOMQuad/constructor(p1), DOMQuad/DOMQuad(), DOMQuad/constructor()" data-dfn-type="argument" data-export id="dom-domquad-domquad-p1-p2-p3-p4-p4"><code><c- g>p4</c-></code><a class="self-link" href="#dom-domquad-domquad-p1-p2-p3-p4-p4"></a></dfn> = {});

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject⑤"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#domquad" id="ref-for-domquad①"><c- n>DOMQuad</c-></a> <a class="idl-code" data-link-type="method" href="#dom-domquad-fromrect" id="ref-for-dom-domquad-fromrect"><c- g>fromRect</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-domrectinit" id="ref-for-dictdef-domrectinit②"><c- n>DOMRectInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMQuad/fromRect(other), DOMQuad/fromRect()" data-dfn-type="argument" data-export id="dom-domquad-fromrect-other-other"><code><c- g>other</c-></code><a class="self-link" href="#dom-domquad-fromrect-other-other"></a></dfn> = {});
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject⑥"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#domquad" id="ref-for-domquad②"><c- n>DOMQuad</c-></a> <a class="idl-code" data-link-type="method" href="#dom-domquad-fromquad" id="ref-for-dom-domquad-fromquad"><c- g>fromQuad</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-domquadinit" id="ref-for-dictdef-domquadinit"><c- n>DOMQuadInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMQuad/fromQuad(other), DOMQuad/fromQuad()" data-dfn-type="argument" data-export id="dom-domquad-fromquad-other-other"><code><c- g>other</c-></code><a class="self-link" href="#dom-domquad-fromquad-other-other"></a></dfn> = {});

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#dompoint" id="ref-for-dompoint①④"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMPoint" href="#dom-domquad-p1" id="ref-for-dom-domquad-p1"><c- g>p1</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#dompoint" id="ref-for-dompoint①⑤"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMPoint" href="#dom-domquad-p2" id="ref-for-dom-domquad-p2"><c- g>p2</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject②"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#dompoint" id="ref-for-dompoint①⑥"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMPoint" href="#dom-domquad-p3" id="ref-for-dom-domquad-p3"><c- g>p3</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject③"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#dompoint" id="ref-for-dompoint①⑦"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMPoint" href="#dom-domquad-p4" id="ref-for-dom-domquad-p4"><c- g>p4</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject⑦"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#domrect" id="ref-for-domrect①③"><c- n>DOMRect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-domquad-getbounds" id="ref-for-dom-domquad-getbounds"><c- g>getBounds</c-></a>();

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default②"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object②"><c- b>object</c-></a> <dfn class="idl-code" data-dfn-for="DOMQuad" data-dfn-type="method" data-export data-lt="toJSON()" id="dom-domquad-tojson"><code><c- g>toJSON</c-></code><a class="self-link" href="#dom-domquad-tojson"></a></dfn>();
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-domquadinit"><code><c- g>DOMQuadInit</c-></code></dfn> {
  <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit⑥"><c- n>DOMPointInit</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMQuadInit" data-dfn-type="dict-member" data-export data-type="DOMPointInit " id="dom-domquadinit-p1"><code><c- g>p1</c-></code></dfn>;
  <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit⑦"><c- n>DOMPointInit</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMQuadInit" data-dfn-type="dict-member" data-export data-type="DOMPointInit " id="dom-domquadinit-p2"><code><c- g>p2</c-></code></dfn>;
  <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit⑧"><c- n>DOMPointInit</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMQuadInit" data-dfn-type="dict-member" data-export data-type="DOMPointInit " id="dom-domquadinit-p3"><code><c- g>p3</c-></code></dfn>;
  <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit⑨"><c- n>DOMPointInit</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMQuadInit" data-dfn-type="dict-member" data-export data-type="DOMPointInit " id="dom-domquadinit-p4"><code><c- g>p4</c-></code></dfn>;
};
</pre>
   <p>The following algorithms assume that <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad③">DOMQuad</a></code> objects have the internal member variables <dfn class="dfn-paneled" data-dfn-for="quadrilateral" data-dfn-type="dfn" data-noexport id="quadrilateral-point-1">point 1</dfn>, <dfn class="dfn-paneled" data-dfn-for="quadrilateral" data-dfn-type="dfn" data-noexport id="quadrilateral-point-2">point 2</dfn>, <dfn class="dfn-paneled" data-dfn-for="quadrilateral" data-dfn-type="dfn" data-lt="point 3" data-noexport id="quadrilateral-point-3">point
3</dfn>, and <dfn class="dfn-paneled" data-dfn-for="quadrilateral" data-dfn-type="dfn" data-noexport id="quadrilateral-point-4">point 4</dfn>, which are <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint①⑧">DOMPoint</a></code> objects. <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad④">DOMQuad</a></code> must be able to access and set the value of these variables. The
author can modify these <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint①⑨">DOMPoint</a></code> objects, which directly affects the quadrilateral.</p>
   <p>An interface returning a <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad⑤">DOMQuad</a></code> object by an attribute or function may be able to modify
internal member variable values. Such an interface must specify this ability explicitly in prose.</p>
   <p>Internal member variables must not be exposed in any way.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMQuad" data-dfn-type="constructor" data-export data-lt="DOMQuad(p1, p2, p3, p4)|constructor(p1, p2, p3, p4)|DOMQuad(p1, p2, p3)|constructor(p1, p2, p3)|DOMQuad(p1, p2)|constructor(p1, p2)|DOMQuad(p1)|constructor(p1)|DOMQuad()|constructor()" id="dom-domquad-domquad"><code>DOMQuad(<var>p1</var>, <var>p2</var>, <var>p3</var>, <var>p4</var>)</code></dfn> constructor, when invoked, must run the following steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>point1</var> be a new <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint②⓪">DOMPoint</a></code> object with its attributes set to the values of
the namesake dictionary members in <var>p1</var>.</p>
    <li data-md>
     <p>Let <var>point2</var> be a new <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint②①">DOMPoint</a></code> object with its attributes set to the values of
the namesake dictionary members in <var>p2</var>.</p>
    <li data-md>
     <p>Let <var>point3</var> be a new <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint②②">DOMPoint</a></code> object with its attributes set to the values of
the namesake dictionary members in <var>p3</var>.</p>
    <li data-md>
     <p>Let <var>point4</var> be a new <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint②③">DOMPoint</a></code> object with its attributes set to the values of
the namesake dictionary members in <var>p4</var>.</p>
    <li data-md>
     <p>Return a new <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad⑥">DOMQuad</a></code> with <a data-link-type="dfn" href="#quadrilateral-point-1" id="ref-for-quadrilateral-point-1">point 1</a> set to <var>point1</var>, <a data-link-type="dfn" href="#quadrilateral-point-2" id="ref-for-quadrilateral-point-2">point 2</a> set to <var>point2</var>, <a data-link-type="dfn" href="#quadrilateral-point-3" id="ref-for-quadrilateral-point-3">point 3</a> set to <var>point3</var> and <a data-link-type="dfn" href="#quadrilateral-point-4" id="ref-for-quadrilateral-point-4">point 4</a> set to <var>point4</var>.</p>
   </ol>
   <p class="note" role="note"><span>Note:</span> It is possible to pass <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint②④">DOMPoint</a></code>/<code class="idl"><a data-link-type="idl" href="#dompointreadonly" id="ref-for-dompointreadonly⑧">DOMPointReadOnly</a></code> arguments as well. The passed
arguments will be transformed to the correct object type internally following the WebIDL rules. <a data-link-type="biblio" href="#biblio-webidl">[WEBIDL]</a></p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMQuad" data-dfn-type="method" data-export data-lt="fromRect(other)|fromRect()" id="dom-domquad-fromrect"><code>fromRect(<var>other</var>)</code></dfn> static method on <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad⑦">DOMQuad</a></code> must <a data-link-type="dfn" href="#create-a-domquad-from-the-domrectinit-dictionary" id="ref-for-create-a-domquad-from-the-domrectinit-dictionary">create a <code>DOMQuad</code> from the <code>DOMRectInit</code> dictionary</a> <var>other</var>.</p>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="create a DOMQuad from the DOMRectInit dictionary" data-noexport id="create-a-domquad-from-the-domrectinit-dictionary">create a <code>DOMQuad</code> from
a <code>DOMRectInit</code> dictionary</dfn> <var>other</var>, follow these steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>x</var>, <var>y</var>, <var>width</var> and <var>height</var> be the value of <var>other</var>’s <code class="idl"><a data-link-type="idl" href="#dom-domrectinit-x" id="ref-for-dom-domrectinit-x①">x</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-domrectinit-y" id="ref-for-dom-domrectinit-y①">y</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-domrectinit-width" id="ref-for-dom-domrectinit-width①">width</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-domrectinit-height" id="ref-for-dom-domrectinit-height①">height</a></code> dictionary members, respectively. </p>
    <li data-md>
     <p>Let <var>point1</var> be a new <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint②⑤">DOMPoint</a></code> object with <a data-link-type="dfn" href="#point-x-coordinate" id="ref-for-point-x-coordinate⑧">x coordinate</a> set to <var>x</var>, <a data-link-type="dfn" href="#point-y-coordinate" id="ref-for-point-y-coordinate⑧">y coordinate</a> set to <var>y</var>, <a data-link-type="dfn" href="#point-z-coordinate" id="ref-for-point-z-coordinate⑦">z coordinate</a> set
to <span class="css">0</span> and <a data-link-type="dfn" href="#point-w-perspective" id="ref-for-point-w-perspective⑦">w perspective</a> set to <span class="css">1</span>.</p>
    <li data-md>
     <p>Let <var>point2</var> be a new <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint②⑥">DOMPoint</a></code> object with <a data-link-type="dfn" href="#point-x-coordinate" id="ref-for-point-x-coordinate⑨">x coordinate</a> set to <var>x</var> + <var>width</var>, <a data-link-type="dfn" href="#point-y-coordinate" id="ref-for-point-y-coordinate⑨">y coordinate</a> set to <var>y</var>, <a data-link-type="dfn" href="#point-z-coordinate" id="ref-for-point-z-coordinate⑧">z
coordinate</a> set to <span class="css">0</span> and <a data-link-type="dfn" href="#point-w-perspective" id="ref-for-point-w-perspective⑧">w perspective</a> set to <span class="css">1</span>.</p>
    <li data-md>
     <p>Let <var>point3</var> be a new <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint②⑦">DOMPoint</a></code> object with <a data-link-type="dfn" href="#point-x-coordinate" id="ref-for-point-x-coordinate①⓪">x coordinate</a> set to <var>x</var> + <var>width</var>, <a data-link-type="dfn" href="#point-y-coordinate" id="ref-for-point-y-coordinate①⓪">y coordinate</a> set to <var>y</var> + <var>height</var>, <a data-link-type="dfn" href="#point-z-coordinate" id="ref-for-point-z-coordinate⑨">z coordinate</a> set to <span class="css">0</span> and <a data-link-type="dfn" href="#point-w-perspective" id="ref-for-point-w-perspective⑨">w perspective</a> set to <span class="css">1</span>.</p>
    <li data-md>
     <p>Let <var>point4</var> be a new <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint②⑧">DOMPoint</a></code> object with <a data-link-type="dfn" href="#point-x-coordinate" id="ref-for-point-x-coordinate①①">x coordinate</a> set to <var>x</var>, <a data-link-type="dfn" href="#point-y-coordinate" id="ref-for-point-y-coordinate①①">y coordinate</a> set to <var>y</var> + <var>height</var>, <a data-link-type="dfn" href="#point-z-coordinate" id="ref-for-point-z-coordinate①⓪">z
coordinate</a> set to <span class="css">0</span> and <a data-link-type="dfn" href="#point-w-perspective" id="ref-for-point-w-perspective①⓪">w perspective</a> set to <span class="css">1</span>.</p>
    <li data-md>
     <p>Return a new <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad⑧">DOMQuad</a></code> with <a data-link-type="dfn" href="#quadrilateral-point-1" id="ref-for-quadrilateral-point-1①">point 1</a> set to <var>point1</var>, <a data-link-type="dfn" href="#quadrilateral-point-2" id="ref-for-quadrilateral-point-2①">point 2</a> set to <var>point2</var>, <a data-link-type="dfn" href="#quadrilateral-point-3" id="ref-for-quadrilateral-point-3①">point 3</a> set to <var>point3</var> and <a data-link-type="dfn" href="#quadrilateral-point-4" id="ref-for-quadrilateral-point-4①">point 4</a> set to <var>point4</var>.</p>
   </ol>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMQuad" data-dfn-type="method" data-export data-lt="fromQuad(other)|fromQuad()" id="dom-domquad-fromquad"><code>fromQuad(<var>other</var>)</code></dfn> static method on <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad⑨">DOMQuad</a></code> must <a data-link-type="dfn" href="#create-a-domquad-from-the-domquadinit-dictionary" id="ref-for-create-a-domquad-from-the-domquadinit-dictionary">create a <code>DOMQuad</code> from the <code>DOMQuadInit</code> dictionary</a> <var>other</var>.</p>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="create a DOMQuad from the DOMQuadInit dictionary" data-noexport id="create-a-domquad-from-the-domquadinit-dictionary">create a <code>DOMQuad</code> from
a <code>DOMQuadInit</code> dictionary</dfn> <var>other</var>, follow these steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>point1</var> be the result of invoking <a data-link-type="dfn" href="#create-a-dompoint-from-the-dictionary" id="ref-for-create-a-dompoint-from-the-dictionary①">create a <code>DOMPoint</code> from the
dictionary</a> <code class="idl"><a data-link-type="idl" href="#dom-domquadinit-p1" id="ref-for-dom-domquadinit-p1">p1</a></code> dictionary member of <var>other</var>, if it exists.</p>
    <li data-md>
     <p>Let <var>point2</var> be the result of invoking <a data-link-type="dfn" href="#create-a-dompoint-from-the-dictionary" id="ref-for-create-a-dompoint-from-the-dictionary②">create a <code>DOMPoint</code> from the
dictionary</a> <code class="idl"><a data-link-type="idl" href="#dom-domquadinit-p2" id="ref-for-dom-domquadinit-p2">p2</a></code> dictionary member of <var>other</var>, if it exists.</p>
    <li data-md>
     <p>Let <var>point3</var> be the result of invoking <a data-link-type="dfn" href="#create-a-dompoint-from-the-dictionary" id="ref-for-create-a-dompoint-from-the-dictionary③">create a <code>DOMPoint</code> from the
dictionary</a> <code class="idl"><a data-link-type="idl" href="#dom-domquadinit-p3" id="ref-for-dom-domquadinit-p3">p3</a></code> dictionary member of <var>other</var>, if it exists.</p>
    <li data-md>
     <p>Let <var>point4</var> be the result of invoking <a data-link-type="dfn" href="#create-a-dompoint-from-the-dictionary" id="ref-for-create-a-dompoint-from-the-dictionary④">create a <code>DOMPoint</code> from the
dictionary</a> <code class="idl"><a data-link-type="idl" href="#dom-domquadinit-p4" id="ref-for-dom-domquadinit-p4">p4</a></code> dictionary member of <var>other</var>, if it exists.</p>
    <li data-md>
     <p>Return a new <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad①⓪">DOMQuad</a></code> with <a data-link-type="dfn" href="#quadrilateral-point-1" id="ref-for-quadrilateral-point-1②">point 1</a> set to <var>point1</var>, <a data-link-type="dfn" href="#quadrilateral-point-2" id="ref-for-quadrilateral-point-2②">point 2</a> set to <var>point2</var>, <a data-link-type="dfn" href="#quadrilateral-point-3" id="ref-for-quadrilateral-point-3②">point 3</a> set to <var>point3</var> and <a data-link-type="dfn" href="#quadrilateral-point-4" id="ref-for-quadrilateral-point-4②">point 4</a> set to <var>point4</var>.</p>
   </ol>
   <div>
     The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMQuad" data-dfn-type="attribute" data-export id="dom-domquad-p1"><code>p1</code></dfn> attribute must return <a data-link-type="dfn" href="#quadrilateral-point-1" id="ref-for-quadrilateral-point-1③">point 1</a>. 
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMQuad" data-dfn-type="attribute" data-export id="dom-domquad-p2"><code>p2</code></dfn> attribute must return <a data-link-type="dfn" href="#quadrilateral-point-2" id="ref-for-quadrilateral-point-2③">point 2</a>.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMQuad" data-dfn-type="attribute" data-export id="dom-domquad-p3"><code>p3</code></dfn> attribute must return <a data-link-type="dfn" href="#quadrilateral-point-3" id="ref-for-quadrilateral-point-3③">point 3</a>.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMQuad" data-dfn-type="attribute" data-export id="dom-domquad-p4"><code>p4</code></dfn> attribute must return <a data-link-type="dfn" href="#quadrilateral-point-4" id="ref-for-quadrilateral-point-4③">point 4</a>.</p>
   </div>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMQuad" data-dfn-type="method" data-export id="dom-domquad-getbounds"><code>getBounds()</code></dfn> method, when invoked, must run the following
algorithm:</p>
   <ol>
    <li data-md>
     <p>Let <var>bounds</var> be a <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect①④">DOMRect</a></code> object.</p>
    <li data-md>
     <p>Let <var>left</var> be the minimum of <a data-link-type="dfn" href="#quadrilateral-point-1" id="ref-for-quadrilateral-point-1④">point 1</a>’s <a data-link-type="dfn" href="#point-x-coordinate" id="ref-for-point-x-coordinate①②">x
coordinate</a>, <a data-link-type="dfn" href="#quadrilateral-point-2" id="ref-for-quadrilateral-point-2④">point 2</a>’s <span id="ref-for-point-x-coordinate①③">x coordinate</span>, <a data-link-type="dfn" href="#quadrilateral-point-3" id="ref-for-quadrilateral-point-3④">point 3</a>’s <span id="ref-for-point-x-coordinate①④">x coordinate</span> and <a data-link-type="dfn" href="#quadrilateral-point-4" id="ref-for-quadrilateral-point-4④">point
4</a>’s <span id="ref-for-point-x-coordinate①⑤">x coordinate</span>.</p>
    <li data-md>
     <p>Let <var>top</var> be the minimum of <a data-link-type="dfn" href="#quadrilateral-point-1" id="ref-for-quadrilateral-point-1⑤">point 1</a>’s <a data-link-type="dfn" href="#point-y-coordinate" id="ref-for-point-y-coordinate①②">y
coordinate</a>, <a data-link-type="dfn" href="#quadrilateral-point-2" id="ref-for-quadrilateral-point-2⑤">point 2</a>’s <span id="ref-for-point-y-coordinate①③">y coordinate</span>, <a data-link-type="dfn" href="#quadrilateral-point-3" id="ref-for-quadrilateral-point-3⑤">point 3</a>’s <span id="ref-for-point-y-coordinate①④">y coordinate</span> and <a data-link-type="dfn" href="#quadrilateral-point-4" id="ref-for-quadrilateral-point-4⑤">point
4</a>’s <span id="ref-for-point-y-coordinate①⑤">y coordinate</span>.</p>
    <li data-md>
     <p>Let <var>right</var> be the maximum of <a data-link-type="dfn" href="#quadrilateral-point-1" id="ref-for-quadrilateral-point-1⑥">point 1</a>’s <a data-link-type="dfn" href="#point-x-coordinate" id="ref-for-point-x-coordinate①⑥">x
coordinate</a>, <a data-link-type="dfn" href="#quadrilateral-point-2" id="ref-for-quadrilateral-point-2⑥">point 2</a>’s <span id="ref-for-point-x-coordinate①⑦">x coordinate</span>, <a data-link-type="dfn" href="#quadrilateral-point-3" id="ref-for-quadrilateral-point-3⑥">point 3</a>’s <span id="ref-for-point-x-coordinate①⑧">x coordinate</span> and <a data-link-type="dfn" href="#quadrilateral-point-4" id="ref-for-quadrilateral-point-4⑥">point
4</a>’s <span id="ref-for-point-x-coordinate①⑨">x coordinate</span>.</p>
    <li data-md>
     <p>Let <var>bottom</var> be the maximum of <a data-link-type="dfn" href="#quadrilateral-point-1" id="ref-for-quadrilateral-point-1⑦">point 1</a>’s <a data-link-type="dfn" href="#point-y-coordinate" id="ref-for-point-y-coordinate①⑥">y
coordinate</a>, <a data-link-type="dfn" href="#quadrilateral-point-2" id="ref-for-quadrilateral-point-2⑦">point 2</a>’s <span id="ref-for-point-y-coordinate①⑦">y coordinate</span>, <a data-link-type="dfn" href="#quadrilateral-point-3" id="ref-for-quadrilateral-point-3⑦">point 3</a>’s <span id="ref-for-point-y-coordinate①⑧">y coordinate</span> and <a data-link-type="dfn" href="#quadrilateral-point-4" id="ref-for-quadrilateral-point-4⑦">point
4</a>’s <span id="ref-for-point-y-coordinate①⑨">y coordinate</span>.</p>
    <li data-md>
     <p>Set <a data-link-type="dfn" href="#rectangle-x-coordinate" id="ref-for-rectangle-x-coordinate⑨">x coordinate</a> of <var>bounds</var> to <var>left</var>, <a data-link-type="dfn" href="#rectangle-y-coordinate" id="ref-for-rectangle-y-coordinate⑨">y coordinate</a> of <var>bounds</var> to <var>top</var>, <a data-link-type="dfn" href="#rectangle-width-dimension" id="ref-for-rectangle-width-dimension⑧">width
dimension</a> of <var>bounds</var> to <var>right</var> - <var>left</var> and <a data-link-type="dfn" href="#rectangle-height-dimension" id="ref-for-rectangle-height-dimension⑧">height dimension</a> of <var>bounds</var> to <var>bottom</var> - <var>top</var>.</p>
    <li data-md>
     <p>Return <var>bounds</var>.</p>
   </ol>
   <div class="example" id="example-9bbe24bd">
    <a class="self-link" href="#example-9bbe24bd"></a> In this example the <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad①①">DOMQuad</a></code> constructor is called with arguments of type <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint②⑨">DOMPoint</a></code> and <code class="idl"><a data-link-type="idl" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit①⓪">DOMPointInit</a></code>. Both arguments are accepted and can be used. 
<pre><code class="highlight"><c- a>var</c-> point <c- o>=</c-> <c- k>new</c-> DOMPoint<c- p>(</c-><c- mi>2</c-><c- p>,</c-> <c- mi>0</c-><c- p>);</c->
<c- a>var</c-> quad1 <c- o>=</c-> <c- k>new</c-> DOMQuad<c- p>(</c->point<c- p>,</c-> <c- p>{</c->x<c- o>:</c-> <c- mi>12</c-><c- p>,</c-> y<c- o>:</c-> <c- mi>0</c-><c- p>},</c-> <c- p>{</c->x<c- o>:</c-> <c- mi>12</c-><c- p>,</c-> y<c- o>:</c-> <c- mi>10</c-><c- p>},</c-> <c- p>{</c->x<c- o>:</c-> <c- mi>2</c-><c- p>,</c-> y<c- o>:</c-> <c- mi>10</c-><c- p>});</c->
</code></pre>
    <p>The attribute values of the resulting <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad①②">DOMQuad</a></code> <var>quad1</var> above are also
equivalent to the attribute values of the following <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad①③">DOMQuad</a></code> <var>quad2</var>:</p>
<pre><code class="highlight"><c- a>var</c-> rect <c- o>=</c-> <c- k>new</c-> DOMRect<c- p>(</c-><c- mi>2</c-><c- p>,</c-> <c- mi>0</c-><c- p>,</c-> <c- mi>10</c-><c- p>,</c-> <c- mi>10</c-><c- p>);</c->
<c- a>var</c-> quad2 <c- o>=</c-> DOMQuad<c- p>.</c->fromRect<c- p>(</c->rect<c- p>);</c->
</code></pre>
   </div>
   <div class="example" id="example-b13b531b">
    <a class="self-link" href="#example-b13b531b"></a> This is an example of an irregular quadrilateral: 
<pre><code class="highlight"><c- k>new</c-> DOMQuad<c- p>({</c->x<c- o>:</c-> <c- mi>40</c-><c- p>,</c-> y<c- o>:</c-> <c- mi>25</c-><c- p>},</c-> <c- p>{</c->x<c- o>:</c-> <c- mi>180</c-><c- p>,</c-> y<c- o>:</c-> <c- mi>8</c-><c- p>},</c-> <c- p>{</c->x<c- o>:</c-> <c- mi>210</c-><c- p>,</c-> y<c- o>:</c-> <c- mi>150</c-><c- p>},</c-> <c- p>{</c->x<c- o>:</c-> <c- mi>10</c-><c- p>,</c-> y<c- o>:</c-> <c- mi>180</c-><c- p>});</c->
</code></pre>
    <figure>
     <svg aria-label="An irregular quadrilateral with none of the
    sides being vertical or horizontal. Its four corners are marked with red circles. Around this
    quadrilateral is a dashed rectangle. All sides of this rectangle are vertical or horizontal and
    tangent the quadrilateral." height="200" role="img" width="230">
      <polygon fill="rgb(51, 153, 204)" points="40 25, 180 8, 210 150, 10 180"></polygon>
      <rect fill="none" height="172" stroke="black" stroke-dasharray="3 2" width="200" x="10" y="8"></rect>
      <circle cx="40" cy="25" fill="rgb(204, 51, 51)" r="3"></circle>
      <circle cx="180" cy="8" fill="rgb(204, 51, 51)" r="3"></circle>
      <circle cx="210" cy="150" fill="rgb(204, 51, 51)" r="3"></circle>
      <circle cx="10" cy="180" fill="rgb(204, 51, 51)" r="3"></circle>
     </svg>
     <figcaption>An irregular quadrilateral represented by a <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad①④">DOMQuad</a></code>. The four red colored
    circles represent the <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint③⓪">DOMPoint</a></code> attributes <code class="idl"><a data-link-type="idl" href="#dom-domquad-p1" id="ref-for-dom-domquad-p1①">p1</a></code> to <code class="idl"><a data-link-type="idl" href="#dom-domquad-p4" id="ref-for-dom-domquad-p4①">p4</a></code>. The dashed
    rectangle represents the bounding rectangle returned by the <code class="idl"><a data-link-type="idl" href="#dom-domquad-getbounds" id="ref-for-dom-domquad-getbounds①">getBounds()</a></code> method of the <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad①⑤">DOMQuad</a></code>.</figcaption>
    </figure>
   </div>
   <h2 class="heading settled" data-level="6" id="DOMMatrix"><span class="secno">6. </span><span class="content">The DOMMatrix interfaces</span><a class="self-link" href="#DOMMatrix"></a></h2>
   <p>The <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix①">DOMMatrix</a></code> and <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly">DOMMatrixReadOnly</a></code> interfaces each represent a mathematical <dfn class="caniuse-paneled dfn-paneled" data-dfn-type="dfn" data-noexport id="matrix">matrix</dfn> with the purpose of describing transformations in a graphical
context. The following sections describe the details of the interface.</p>
   <figure>
    <math display="block">
     <mrow>
      <mfenced close="]" open="[" separators=",">
       <mrow>
        <mtable>
         <mtr>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>11</mi>
           </msub>
          </mtd>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>21</mi>
           </msub>
          </mtd>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>31</mi>
           </msub>
          </mtd>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>41</mi>
           </msub>
          </mtd>
         </mtr>
         <mtr>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>12</mi>
           </msub>
          </mtd>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>22</mi>
           </msub>
          </mtd>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>32</mi>
           </msub>
          </mtd>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>42</mi>
           </msub>
          </mtd>
         </mtr>
         <mtr>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>13</mi>
           </msub>
          </mtd>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>23</mi>
           </msub>
          </mtd>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>33</mi>
           </msub>
          </mtd>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>43</mi>
           </msub>
          </mtd>
         </mtr>
         <mtr>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>14</mi>
           </msub>
          </mtd>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>24</mi>
           </msub>
          </mtd>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>34</mi>
           </msub>
          </mtd>
          <mtd>
           <msub>
            <mi>m</mi>
            <mi>44</mi>
           </msub>
          </mtd>
         </mtr>
        </mtable>
       </mrow>
      </mfenced>
     </mrow>
    </math>
    <figcaption>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="4x4-abstract-matrix">4x4 abstract matrix</dfn> with items <var>m<sub>11</sub></var> to <var>m<sub>44</sub></var>.</figcaption>
   </figure>
   <p>In the following sections, terms have the following meaning:</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="post-multiply">post-multiply</dfn>
    <dd data-md>
     <p>Term <var>A</var> post-multiplied by term <var>B</var> is equal to <var>A</var> · <var>B</var>. </p>
    <dt data-md><dfn data-dfn-type="dfn" data-export id="pre-multiply">pre-multiply<a class="self-link" href="#pre-multiply"></a></dfn>
    <dd data-md>
     <p>Term <var>A</var> pre-multiplied by term <var>B</var> is equal to <var>B</var> · <var>A</var>.</p>
    <dt data-md><dfn data-dfn-type="dfn" data-export id="multiply">multiply<a class="self-link" href="#multiply"></a></dfn>
    <dd data-md>
     <p>Multiply term <var>A</var> by term <var>B</var> is equal to <var>A</var> · <var>B</var>.</p>
   </dl>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑥"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable⑤"><c- g>Serializable</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="dommatrixreadonly"><code><c- g>DOMMatrixReadOnly</c-></code></dfn> {
    <a class="idl-code" data-link-type="constructor" href="#dom-dommatrixreadonly-dommatrixreadonly" id="ref-for-dom-dommatrixreadonly-dommatrixreadonly"><c- g>constructor</c-></a>(<c- b>optional</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④④"><c- b>unrestricted</c-> <c- b>double</c-></a>>) <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/DOMMatrixReadOnly(init), DOMMatrixReadOnly/constructor(init), DOMMatrixReadOnly/DOMMatrixReadOnly(), DOMMatrixReadOnly/constructor()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-dommatrixreadonly-init-init"><code><c- g>init</c-></code><a class="self-link" href="#dom-dommatrixreadonly-dommatrixreadonly-init-init"></a></dfn>);

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject⑧"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly①"><c- n>DOMMatrixReadOnly</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-frommatrix" id="ref-for-dom-dommatrixreadonly-frommatrix"><c- g>fromMatrix</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit①"><c- n>DOMMatrixInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/fromMatrix(other), DOMMatrixReadOnly/fromMatrix()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-frommatrix-other-other"><code><c- g>other</c-></code><a class="self-link" href="#dom-dommatrixreadonly-frommatrix-other-other"></a></dfn> = {});
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject⑨"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly②"><c- n>DOMMatrixReadOnly</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-fromfloat32array" id="ref-for-dom-dommatrixreadonly-fromfloat32array"><c- g>fromFloat32Array</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array"><c- b>Float32Array</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/fromFloat32Array(array32)" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-fromfloat32array-array32-array32"><code><c- g>array32</c-></code><a class="self-link" href="#dom-dommatrixreadonly-fromfloat32array-array32-array32"></a></dfn>);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①⓪"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly③"><c- n>DOMMatrixReadOnly</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-fromfloat64array" id="ref-for-dom-dommatrixreadonly-fromfloat64array"><c- g>fromFloat64Array</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float64Array" id="ref-for-idl-Float64Array"><c- b>Float64Array</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/fromFloat64Array(array64)" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-fromfloat64array-array64-array64"><code><c- g>array64</c-></code><a class="self-link" href="#dom-dommatrixreadonly-fromfloat64array-array64-array64"></a></dfn>);

    // These attributes are simple aliases for certain elements of the 4x4 matrix
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-a" id="ref-for-dom-dommatrixreadonly-a"><c- g>a</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-b" id="ref-for-dom-dommatrixreadonly-b"><c- g>b</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-c" id="ref-for-dom-dommatrixreadonly-c"><c- g>c</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-d" id="ref-for-dom-dommatrixreadonly-d"><c- g>d</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-e" id="ref-for-dom-dommatrixreadonly-e"><c- g>e</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-f" id="ref-for-dom-dommatrixreadonly-f"><c- g>f</c-></a>;

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m11" id="ref-for-dom-dommatrixreadonly-m11"><c- g>m11</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤②"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m12" id="ref-for-dom-dommatrixreadonly-m12"><c- g>m12</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤③"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m13" id="ref-for-dom-dommatrixreadonly-m13"><c- g>m13</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤④"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m14" id="ref-for-dom-dommatrixreadonly-m14"><c- g>m14</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m21" id="ref-for-dom-dommatrixreadonly-m21"><c- g>m21</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m22" id="ref-for-dom-dommatrixreadonly-m22"><c- g>m22</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m23" id="ref-for-dom-dommatrixreadonly-m23"><c- g>m23</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m24" id="ref-for-dom-dommatrixreadonly-m24"><c- g>m24</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m31" id="ref-for-dom-dommatrixreadonly-m31"><c- g>m31</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m32" id="ref-for-dom-dommatrixreadonly-m32"><c- g>m32</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m33" id="ref-for-dom-dommatrixreadonly-m33"><c- g>m33</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥②"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m34" id="ref-for-dom-dommatrixreadonly-m34"><c- g>m34</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥③"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m41" id="ref-for-dom-dommatrixreadonly-m41"><c- g>m41</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥④"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m42" id="ref-for-dom-dommatrixreadonly-m42"><c- g>m42</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m43" id="ref-for-dom-dommatrixreadonly-m43"><c- g>m43</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m44" id="ref-for-dom-dommatrixreadonly-m44"><c- g>m44</c-></a>;

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-dommatrixreadonly-is2d" id="ref-for-dom-dommatrixreadonly-is2d"><c- g>is2D</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-dommatrixreadonly-isidentity" id="ref-for-dom-dommatrixreadonly-isidentity"><c- g>isIdentity</c-></a>;

    // Immutable transform methods
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-translate" id="ref-for-dom-dommatrixreadonly-translate"><c- g>translate</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/translate(tx, ty, tz), DOMMatrixReadOnly/translate(tx, ty), DOMMatrixReadOnly/translate(tx), DOMMatrixReadOnly/translate()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-translate-tx-ty-tz-tx"><code><c- g>tx</c-></code><a class="self-link" href="#dom-dommatrixreadonly-translate-tx-ty-tz-tx"></a></dfn> = 0,
                                    <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/translate(tx, ty, tz), DOMMatrixReadOnly/translate(tx, ty), DOMMatrixReadOnly/translate(tx), DOMMatrixReadOnly/translate()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-translate-tx-ty-tz-ty"><code><c- g>ty</c-></code><a class="self-link" href="#dom-dommatrixreadonly-translate-tx-ty-tz-ty"></a></dfn> = 0,
                                    <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/translate(tx, ty, tz), DOMMatrixReadOnly/translate(tx, ty), DOMMatrixReadOnly/translate(tx), DOMMatrixReadOnly/translate()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-translate-tx-ty-tz-tz"><code><c- g>tz</c-></code><a class="self-link" href="#dom-dommatrixreadonly-translate-tx-ty-tz-tz"></a></dfn> = 0);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①②"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix③"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-scale" id="ref-for-dom-dommatrixreadonly-scale"><c- g>scale</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX, originY, originZ), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX, originY), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ), DOMMatrixReadOnly/scale(scaleX, scaleY), DOMMatrixReadOnly/scale(scaleX), DOMMatrixReadOnly/scale()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-scalex"><code><c- g>scaleX</c-></code><a class="self-link" href="#dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-scalex"></a></dfn> = 1,
                                <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX, originY, originZ), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX, originY), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ), DOMMatrixReadOnly/scale(scaleX, scaleY), DOMMatrixReadOnly/scale(scaleX), DOMMatrixReadOnly/scale()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-scaley"><code><c- g>scaleY</c-></code><a class="self-link" href="#dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-scaley"></a></dfn>,
                                <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦②"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX, originY, originZ), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX, originY), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ), DOMMatrixReadOnly/scale(scaleX, scaleY), DOMMatrixReadOnly/scale(scaleX), DOMMatrixReadOnly/scale()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-scalez"><code><c- g>scaleZ</c-></code><a class="self-link" href="#dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-scalez"></a></dfn> = 1,
                                <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦③"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX, originY, originZ), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX, originY), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ), DOMMatrixReadOnly/scale(scaleX, scaleY), DOMMatrixReadOnly/scale(scaleX), DOMMatrixReadOnly/scale()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-originx"><code><c- g>originX</c-></code><a class="self-link" href="#dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-originx"></a></dfn> = 0,
                                <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦④"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX, originY, originZ), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX, originY), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ), DOMMatrixReadOnly/scale(scaleX, scaleY), DOMMatrixReadOnly/scale(scaleX), DOMMatrixReadOnly/scale()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-originy"><code><c- g>originY</c-></code><a class="self-link" href="#dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-originy"></a></dfn> = 0,
                                <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX, originY, originZ), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX, originY), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ, originX), DOMMatrixReadOnly/scale(scaleX, scaleY, scaleZ), DOMMatrixReadOnly/scale(scaleX, scaleY), DOMMatrixReadOnly/scale(scaleX), DOMMatrixReadOnly/scale()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-originz"><code><c- g>originZ</c-></code><a class="self-link" href="#dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-originz"></a></dfn> = 0);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①③"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix④"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-scalenonuniform" id="ref-for-dom-dommatrixreadonly-scalenonuniform"><c- g>scaleNonUniform</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/scaleNonUniform(scaleX, scaleY), DOMMatrixReadOnly/scaleNonUniform(scaleX), DOMMatrixReadOnly/scaleNonUniform()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-scalenonuniform-scalex-scaley-scalex"><code><c- g>scaleX</c-></code><a class="self-link" href="#dom-dommatrixreadonly-scalenonuniform-scalex-scaley-scalex"></a></dfn> = 1,
                                          <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/scaleNonUniform(scaleX, scaleY), DOMMatrixReadOnly/scaleNonUniform(scaleX), DOMMatrixReadOnly/scaleNonUniform()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-scalenonuniform-scalex-scaley-scaley"><code><c- g>scaleY</c-></code><a class="self-link" href="#dom-dommatrixreadonly-scalenonuniform-scalex-scaley-scaley"></a></dfn> = 1);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①④"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix⑤"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-scale3d" id="ref-for-dom-dommatrixreadonly-scale3d"><c- g>scale3d</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/scale3d(scale, originX, originY, originZ), DOMMatrixReadOnly/scale3d(scale, originX, originY), DOMMatrixReadOnly/scale3d(scale, originX), DOMMatrixReadOnly/scale3d(scale), DOMMatrixReadOnly/scale3d()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-scale3d-scale-originx-originy-originz-scale"><code><c- g>scale</c-></code><a class="self-link" href="#dom-dommatrixreadonly-scale3d-scale-originx-originy-originz-scale"></a></dfn> = 1,
                                  <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/scale3d(scale, originX, originY, originZ), DOMMatrixReadOnly/scale3d(scale, originX, originY), DOMMatrixReadOnly/scale3d(scale, originX), DOMMatrixReadOnly/scale3d(scale), DOMMatrixReadOnly/scale3d()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-scale3d-scale-originx-originy-originz-originx"><code><c- g>originX</c-></code><a class="self-link" href="#dom-dommatrixreadonly-scale3d-scale-originx-originy-originz-originx"></a></dfn> = 0,
                                  <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/scale3d(scale, originX, originY, originZ), DOMMatrixReadOnly/scale3d(scale, originX, originY), DOMMatrixReadOnly/scale3d(scale, originX), DOMMatrixReadOnly/scale3d(scale), DOMMatrixReadOnly/scale3d()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-scale3d-scale-originx-originy-originz-originy"><code><c- g>originY</c-></code><a class="self-link" href="#dom-dommatrixreadonly-scale3d-scale-originx-originy-originz-originy"></a></dfn> = 0,
                                  <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/scale3d(scale, originX, originY, originZ), DOMMatrixReadOnly/scale3d(scale, originX, originY), DOMMatrixReadOnly/scale3d(scale, originX), DOMMatrixReadOnly/scale3d(scale), DOMMatrixReadOnly/scale3d()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-scale3d-scale-originx-originy-originz-originz"><code><c- g>originZ</c-></code><a class="self-link" href="#dom-dommatrixreadonly-scale3d-scale-originx-originy-originz-originz"></a></dfn> = 0);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①⑤"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix⑥"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-rotate" id="ref-for-dom-dommatrixreadonly-rotate"><c- g>rotate</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧②"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/rotate(rotX, rotY, rotZ), DOMMatrixReadOnly/rotate(rotX, rotY), DOMMatrixReadOnly/rotate(rotX), DOMMatrixReadOnly/rotate()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-rotate-rotx-roty-rotz-rotx"><code><c- g>rotX</c-></code><a class="self-link" href="#dom-dommatrixreadonly-rotate-rotx-roty-rotz-rotx"></a></dfn> = 0,
                                 <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧③"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/rotate(rotX, rotY, rotZ), DOMMatrixReadOnly/rotate(rotX, rotY), DOMMatrixReadOnly/rotate(rotX), DOMMatrixReadOnly/rotate()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-rotate-rotx-roty-rotz-roty"><code><c- g>rotY</c-></code><a class="self-link" href="#dom-dommatrixreadonly-rotate-rotx-roty-rotz-roty"></a></dfn>,
                                 <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧④"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/rotate(rotX, rotY, rotZ), DOMMatrixReadOnly/rotate(rotX, rotY), DOMMatrixReadOnly/rotate(rotX), DOMMatrixReadOnly/rotate()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-rotate-rotx-roty-rotz-rotz"><code><c- g>rotZ</c-></code><a class="self-link" href="#dom-dommatrixreadonly-rotate-rotx-roty-rotz-rotz"></a></dfn>);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①⑥"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix⑦"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-rotatefromvector" id="ref-for-dom-dommatrixreadonly-rotatefromvector"><c- g>rotateFromVector</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/rotateFromVector(x, y), DOMMatrixReadOnly/rotateFromVector(x), DOMMatrixReadOnly/rotateFromVector()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-rotatefromvector-x-y-x"><code><c- g>x</c-></code><a class="self-link" href="#dom-dommatrixreadonly-rotatefromvector-x-y-x"></a></dfn> = 0,
                                           <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/rotateFromVector(x, y), DOMMatrixReadOnly/rotateFromVector(x), DOMMatrixReadOnly/rotateFromVector()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-rotatefromvector-x-y-y"><code><c- g>y</c-></code><a class="self-link" href="#dom-dommatrixreadonly-rotatefromvector-x-y-y"></a></dfn> = 0);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①⑦"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix⑧"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-rotateaxisangle" id="ref-for-dom-dommatrixreadonly-rotateaxisangle"><c- g>rotateAxisAngle</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/rotateAxisAngle(x, y, z, angle), DOMMatrixReadOnly/rotateAxisAngle(x, y, z), DOMMatrixReadOnly/rotateAxisAngle(x, y), DOMMatrixReadOnly/rotateAxisAngle(x), DOMMatrixReadOnly/rotateAxisAngle()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-rotateaxisangle-x-y-z-angle-x"><code><c- g>x</c-></code><a class="self-link" href="#dom-dommatrixreadonly-rotateaxisangle-x-y-z-angle-x"></a></dfn> = 0,
                                          <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/rotateAxisAngle(x, y, z, angle), DOMMatrixReadOnly/rotateAxisAngle(x, y, z), DOMMatrixReadOnly/rotateAxisAngle(x, y), DOMMatrixReadOnly/rotateAxisAngle(x), DOMMatrixReadOnly/rotateAxisAngle()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-rotateaxisangle-x-y-z-angle-y"><code><c- g>y</c-></code><a class="self-link" href="#dom-dommatrixreadonly-rotateaxisangle-x-y-z-angle-y"></a></dfn> = 0,
                                          <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/rotateAxisAngle(x, y, z, angle), DOMMatrixReadOnly/rotateAxisAngle(x, y, z), DOMMatrixReadOnly/rotateAxisAngle(x, y), DOMMatrixReadOnly/rotateAxisAngle(x), DOMMatrixReadOnly/rotateAxisAngle()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-rotateaxisangle-x-y-z-angle-z"><code><c- g>z</c-></code><a class="self-link" href="#dom-dommatrixreadonly-rotateaxisangle-x-y-z-angle-z"></a></dfn> = 0,
                                          <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/rotateAxisAngle(x, y, z, angle), DOMMatrixReadOnly/rotateAxisAngle(x, y, z), DOMMatrixReadOnly/rotateAxisAngle(x, y), DOMMatrixReadOnly/rotateAxisAngle(x), DOMMatrixReadOnly/rotateAxisAngle()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-rotateaxisangle-x-y-z-angle-angle"><code><c- g>angle</c-></code><a class="self-link" href="#dom-dommatrixreadonly-rotateaxisangle-x-y-z-angle-angle"></a></dfn> = 0);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①⑧"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix⑨"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-skewx" id="ref-for-dom-dommatrixreadonly-skewx"><c- g>skewX</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/skewX(sx), DOMMatrixReadOnly/skewX()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-skewx-sx-sx"><code><c- g>sx</c-></code><a class="self-link" href="#dom-dommatrixreadonly-skewx-sx-sx"></a></dfn> = 0);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①⑨"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①⓪"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-skewy" id="ref-for-dom-dommatrixreadonly-skewy"><c- g>skewY</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨②"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/skewY(sy), DOMMatrixReadOnly/skewY()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-skewy-sy-sy"><code><c- g>sy</c-></code><a class="self-link" href="#dom-dommatrixreadonly-skewy-sy-sy"></a></dfn> = 0);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②⓪"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-multiply" id="ref-for-dom-dommatrixreadonly-multiply"><c- g>multiply</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit②"><c- n>DOMMatrixInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/multiply(other), DOMMatrixReadOnly/multiply()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-multiply-other-other"><code><c- g>other</c-></code><a class="self-link" href="#dom-dommatrixreadonly-multiply-other-other"></a></dfn> = {});
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①②"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-flipx" id="ref-for-dom-dommatrixreadonly-flipx"><c- g>flipX</c-></a>();
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②②"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①③"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-flipy" id="ref-for-dom-dommatrixreadonly-flipy"><c- g>flipY</c-></a>();
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②③"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①④"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-inverse" id="ref-for-dom-dommatrixreadonly-inverse"><c- g>inverse</c-></a>();

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②④"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dompoint" id="ref-for-dompoint③①"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-transformpoint" id="ref-for-dom-dommatrixreadonly-transformpoint"><c- g>transformPoint</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit①①"><c- n>DOMPointInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly/transformPoint(point), DOMMatrixReadOnly/transformPoint()" data-dfn-type="argument" data-export id="dom-dommatrixreadonly-transformpoint-point-point"><code><c- g>point</c-></code><a class="self-link" href="#dom-dommatrixreadonly-transformpoint-point-point"></a></dfn> = {});
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②⑤"><c- g>NewObject</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array①"><c- b>Float32Array</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-tofloat32array" id="ref-for-dom-dommatrixreadonly-tofloat32array"><c- g>toFloat32Array</c-></a>();
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②⑥"><c- g>NewObject</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float64Array" id="ref-for-idl-Float64Array①"><c- b>Float64Array</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-tofloat64array" id="ref-for-dom-dommatrixreadonly-tofloat64array"><c- g>toFloat64Array</c-></a>();

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑦"><c- g>Exposed</c-></a>=<c- n>Window</c->] <a data-link-type="dfn" href="#dommatrixreadonly-stringification-behavior" id="ref-for-dommatrixreadonly-stringification-behavior"><c- b>stringifier</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default③"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object③"><c- b>object</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export data-lt="toJSON()" id="dom-dommatrixreadonly-tojson"><code><c- g>toJSON</c-></code><a class="self-link" href="#dom-dommatrixreadonly-tojson"></a></dfn>();
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑧"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable⑥"><c- g>Serializable</c-></a>,
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#LegacyWindowAlias" id="ref-for-LegacyWindowAlias②"><c- g>LegacyWindowAlias</c-></a>=(<dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="svgmatrix"><code><c- n>SVGMatrix</c-></code></dfn>,<dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="webkitcssmatrix"><code><c- n>WebKitCSSMatrix</c-></code></dfn>)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="dommatrix"><code><c- g>DOMMatrix</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly④"><c- n>DOMMatrixReadOnly</c-></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-dommatrix-dommatrix" id="ref-for-dom-dommatrix-dommatrix"><c- g>constructor</c-></a>(<c- b>optional</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨③"><c- b>unrestricted</c-> <c- b>double</c-></a>>) <dfn class="idl-code" data-dfn-for="DOMMatrix/DOMMatrix(init), DOMMatrix/constructor(init), DOMMatrix/DOMMatrix(), DOMMatrix/constructor()" data-dfn-type="argument" data-export id="dom-dommatrix-dommatrix-init-init"><code><c- g>init</c-></code><a class="self-link" href="#dom-dommatrix-dommatrix-init-init"></a></dfn>);

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②⑦"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①⑤"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-frommatrix" id="ref-for-dom-dommatrix-frommatrix"><c- g>fromMatrix</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit③"><c- n>DOMMatrixInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/fromMatrix(other), DOMMatrix/fromMatrix()" data-dfn-type="argument" data-export id="dom-dommatrix-frommatrix-other-other"><code><c- g>other</c-></code><a class="self-link" href="#dom-dommatrix-frommatrix-other-other"></a></dfn> = {});
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②⑧"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①⑥"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-fromfloat32array" id="ref-for-dom-dommatrix-fromfloat32array"><c- g>fromFloat32Array</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array②"><c- b>Float32Array</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/fromFloat32Array(array32)" data-dfn-type="argument" data-export id="dom-dommatrix-fromfloat32array-array32-array32"><code><c- g>array32</c-></code><a class="self-link" href="#dom-dommatrix-fromfloat32array-array32-array32"></a></dfn>);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②⑨"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①⑦"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-fromfloat64array" id="ref-for-dom-dommatrix-fromfloat64array"><c- g>fromFloat64Array</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float64Array" id="ref-for-idl-Float64Array②"><c- b>Float64Array</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/fromFloat64Array(array64)" data-dfn-type="argument" data-export id="dom-dommatrix-fromfloat64array-array64-array64"><code><c- g>array64</c-></code><a class="self-link" href="#dom-dommatrix-fromfloat64array-array64-array64"></a></dfn>);

    // These attributes are simple aliases for certain elements of the 4x4 matrix
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨④"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-a" id="ref-for-dom-dommatrixreadonly-a①"><c- g>a</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-b" id="ref-for-dom-dommatrixreadonly-b①"><c- g>b</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-c" id="ref-for-dom-dommatrixreadonly-c①"><c- g>c</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-d" id="ref-for-dom-dommatrixreadonly-d①"><c- g>d</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-e" id="ref-for-dom-dommatrixreadonly-e①"><c- g>e</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-f" id="ref-for-dom-dommatrixreadonly-f①"><c- g>f</c-></a>;

    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m11" id="ref-for-dom-dommatrixreadonly-m11①"><c- g>m11</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m12" id="ref-for-dom-dommatrixreadonly-m12①"><c- g>m12</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪②"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m13" id="ref-for-dom-dommatrixreadonly-m13①"><c- g>m13</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪③"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m14" id="ref-for-dom-dommatrixreadonly-m14①"><c- g>m14</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪④"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m21" id="ref-for-dom-dommatrixreadonly-m21①"><c- g>m21</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m22" id="ref-for-dom-dommatrixreadonly-m22①"><c- g>m22</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m23" id="ref-for-dom-dommatrixreadonly-m23①"><c- g>m23</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m24" id="ref-for-dom-dommatrixreadonly-m24①"><c- g>m24</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m31" id="ref-for-dom-dommatrixreadonly-m31①"><c- g>m31</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m32" id="ref-for-dom-dommatrixreadonly-m32①"><c- g>m32</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m33" id="ref-for-dom-dommatrixreadonly-m33①"><c- g>m33</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m34" id="ref-for-dom-dommatrixreadonly-m34①"><c- g>m34</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①②"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m41" id="ref-for-dom-dommatrixreadonly-m41①"><c- g>m41</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①③"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m42" id="ref-for-dom-dommatrixreadonly-m42①"><c- g>m42</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①④"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m43" id="ref-for-dom-dommatrixreadonly-m43①"><c- g>m43</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m44" id="ref-for-dom-dommatrixreadonly-m44①"><c- g>m44</c-></a>;

    // Mutable transform methods
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①⑧"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-multiplyself" id="ref-for-dom-dommatrix-multiplyself"><c- g>multiplySelf</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit④"><c- n>DOMMatrixInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/multiplySelf(other), DOMMatrix/multiplySelf()" data-dfn-type="argument" data-export id="dom-dommatrix-multiplyself-other-other"><code><c- g>other</c-></code><a class="self-link" href="#dom-dommatrix-multiplyself-other-other"></a></dfn> = {});
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①⑨"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-premultiplyself" id="ref-for-dom-dommatrix-premultiplyself"><c- g>preMultiplySelf</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit⑤"><c- n>DOMMatrixInit</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/preMultiplySelf(other), DOMMatrix/preMultiplySelf()" data-dfn-type="argument" data-export id="dom-dommatrix-premultiplyself-other-other"><code><c- g>other</c-></code><a class="self-link" href="#dom-dommatrix-premultiplyself-other-other"></a></dfn> = {});
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②⓪"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-translateself" id="ref-for-dom-dommatrix-translateself"><c- g>translateSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/translateSelf(tx, ty, tz), DOMMatrix/translateSelf(tx, ty), DOMMatrix/translateSelf(tx), DOMMatrix/translateSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-translateself-tx-ty-tz-tx"><code><c- g>tx</c-></code><a class="self-link" href="#dom-dommatrix-translateself-tx-ty-tz-tx"></a></dfn> = 0,
                            <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/translateSelf(tx, ty, tz), DOMMatrix/translateSelf(tx, ty), DOMMatrix/translateSelf(tx), DOMMatrix/translateSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-translateself-tx-ty-tz-ty"><code><c- g>ty</c-></code><a class="self-link" href="#dom-dommatrix-translateself-tx-ty-tz-ty"></a></dfn> = 0,
                            <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/translateSelf(tx, ty, tz), DOMMatrix/translateSelf(tx, ty), DOMMatrix/translateSelf(tx), DOMMatrix/translateSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-translateself-tx-ty-tz-tz"><code><c- g>tz</c-></code><a class="self-link" href="#dom-dommatrix-translateself-tx-ty-tz-tz"></a></dfn> = 0);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-scaleself" id="ref-for-dom-dommatrix-scaleself"><c- g>scaleSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX, originY), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ), DOMMatrix/scaleSelf(scaleX, scaleY), DOMMatrix/scaleSelf(scaleX), DOMMatrix/scaleSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-scalex"><code><c- g>scaleX</c-></code><a class="self-link" href="#dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-scalex"></a></dfn> = 1,
                        <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX, originY), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ), DOMMatrix/scaleSelf(scaleX, scaleY), DOMMatrix/scaleSelf(scaleX), DOMMatrix/scaleSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-scaley"><code><c- g>scaleY</c-></code><a class="self-link" href="#dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-scaley"></a></dfn>,
                        <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX, originY), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ), DOMMatrix/scaleSelf(scaleX, scaleY), DOMMatrix/scaleSelf(scaleX), DOMMatrix/scaleSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-scalez"><code><c- g>scaleZ</c-></code><a class="self-link" href="#dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-scalez"></a></dfn> = 1,
                        <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②②"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX, originY), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ), DOMMatrix/scaleSelf(scaleX, scaleY), DOMMatrix/scaleSelf(scaleX), DOMMatrix/scaleSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-originx"><code><c- g>originX</c-></code><a class="self-link" href="#dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-originx"></a></dfn> = 0,
                        <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②③"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX, originY), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ), DOMMatrix/scaleSelf(scaleX, scaleY), DOMMatrix/scaleSelf(scaleX), DOMMatrix/scaleSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-originy"><code><c- g>originY</c-></code><a class="self-link" href="#dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-originy"></a></dfn> = 0,
                        <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②④"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX, originY), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ, originX), DOMMatrix/scaleSelf(scaleX, scaleY, scaleZ), DOMMatrix/scaleSelf(scaleX, scaleY), DOMMatrix/scaleSelf(scaleX), DOMMatrix/scaleSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-originz"><code><c- g>originZ</c-></code><a class="self-link" href="#dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-originz"></a></dfn> = 0);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②②"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-scale3dself" id="ref-for-dom-dommatrix-scale3dself"><c- g>scale3dSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/scale3dSelf(scale, originX, originY, originZ), DOMMatrix/scale3dSelf(scale, originX, originY), DOMMatrix/scale3dSelf(scale, originX), DOMMatrix/scale3dSelf(scale), DOMMatrix/scale3dSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-scale3dself-scale-originx-originy-originz-scale"><code><c- g>scale</c-></code><a class="self-link" href="#dom-dommatrix-scale3dself-scale-originx-originy-originz-scale"></a></dfn> = 1,
                          <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/scale3dSelf(scale, originX, originY, originZ), DOMMatrix/scale3dSelf(scale, originX, originY), DOMMatrix/scale3dSelf(scale, originX), DOMMatrix/scale3dSelf(scale), DOMMatrix/scale3dSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-scale3dself-scale-originx-originy-originz-originx"><code><c- g>originX</c-></code><a class="self-link" href="#dom-dommatrix-scale3dself-scale-originx-originy-originz-originx"></a></dfn> = 0,
                          <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/scale3dSelf(scale, originX, originY, originZ), DOMMatrix/scale3dSelf(scale, originX, originY), DOMMatrix/scale3dSelf(scale, originX), DOMMatrix/scale3dSelf(scale), DOMMatrix/scale3dSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-scale3dself-scale-originx-originy-originz-originy"><code><c- g>originY</c-></code><a class="self-link" href="#dom-dommatrix-scale3dself-scale-originx-originy-originz-originy"></a></dfn> = 0,
                          <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/scale3dSelf(scale, originX, originY, originZ), DOMMatrix/scale3dSelf(scale, originX, originY), DOMMatrix/scale3dSelf(scale, originX), DOMMatrix/scale3dSelf(scale), DOMMatrix/scale3dSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-scale3dself-scale-originx-originy-originz-originz"><code><c- g>originZ</c-></code><a class="self-link" href="#dom-dommatrix-scale3dself-scale-originx-originy-originz-originz"></a></dfn> = 0);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②③"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-rotateself" id="ref-for-dom-dommatrix-rotateself"><c- g>rotateSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/rotateSelf(rotX, rotY, rotZ), DOMMatrix/rotateSelf(rotX, rotY), DOMMatrix/rotateSelf(rotX), DOMMatrix/rotateSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-rotateself-rotx-roty-rotz-rotx"><code><c- g>rotX</c-></code><a class="self-link" href="#dom-dommatrix-rotateself-rotx-roty-rotz-rotx"></a></dfn> = 0,
                         <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/rotateSelf(rotX, rotY, rotZ), DOMMatrix/rotateSelf(rotX, rotY), DOMMatrix/rotateSelf(rotX), DOMMatrix/rotateSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-rotateself-rotx-roty-rotz-roty"><code><c- g>rotY</c-></code><a class="self-link" href="#dom-dommatrix-rotateself-rotx-roty-rotz-roty"></a></dfn>,
                         <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/rotateSelf(rotX, rotY, rotZ), DOMMatrix/rotateSelf(rotX, rotY), DOMMatrix/rotateSelf(rotX), DOMMatrix/rotateSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-rotateself-rotx-roty-rotz-rotz"><code><c- g>rotZ</c-></code><a class="self-link" href="#dom-dommatrix-rotateself-rotx-roty-rotz-rotz"></a></dfn>);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②④"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-rotatefromvectorself" id="ref-for-dom-dommatrix-rotatefromvectorself"><c- g>rotateFromVectorSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③②"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/rotateFromVectorSelf(x, y), DOMMatrix/rotateFromVectorSelf(x), DOMMatrix/rotateFromVectorSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-rotatefromvectorself-x-y-x"><code><c- g>x</c-></code><a class="self-link" href="#dom-dommatrix-rotatefromvectorself-x-y-x"></a></dfn> = 0,
                                   <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③③"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/rotateFromVectorSelf(x, y), DOMMatrix/rotateFromVectorSelf(x), DOMMatrix/rotateFromVectorSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-rotatefromvectorself-x-y-y"><code><c- g>y</c-></code><a class="self-link" href="#dom-dommatrix-rotatefromvectorself-x-y-y"></a></dfn> = 0);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②⑤"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-rotateaxisangleself" id="ref-for-dom-dommatrix-rotateaxisangleself"><c- g>rotateAxisAngleSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③④"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/rotateAxisAngleSelf(x, y, z, angle), DOMMatrix/rotateAxisAngleSelf(x, y, z), DOMMatrix/rotateAxisAngleSelf(x, y), DOMMatrix/rotateAxisAngleSelf(x), DOMMatrix/rotateAxisAngleSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-rotateaxisangleself-x-y-z-angle-x"><code><c- g>x</c-></code><a class="self-link" href="#dom-dommatrix-rotateaxisangleself-x-y-z-angle-x"></a></dfn> = 0,
                                  <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/rotateAxisAngleSelf(x, y, z, angle), DOMMatrix/rotateAxisAngleSelf(x, y, z), DOMMatrix/rotateAxisAngleSelf(x, y), DOMMatrix/rotateAxisAngleSelf(x), DOMMatrix/rotateAxisAngleSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-rotateaxisangleself-x-y-z-angle-y"><code><c- g>y</c-></code><a class="self-link" href="#dom-dommatrix-rotateaxisangleself-x-y-z-angle-y"></a></dfn> = 0,
                                  <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/rotateAxisAngleSelf(x, y, z, angle), DOMMatrix/rotateAxisAngleSelf(x, y, z), DOMMatrix/rotateAxisAngleSelf(x, y), DOMMatrix/rotateAxisAngleSelf(x), DOMMatrix/rotateAxisAngleSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-rotateaxisangleself-x-y-z-angle-z"><code><c- g>z</c-></code><a class="self-link" href="#dom-dommatrix-rotateaxisangleself-x-y-z-angle-z"></a></dfn> = 0,
                                  <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/rotateAxisAngleSelf(x, y, z, angle), DOMMatrix/rotateAxisAngleSelf(x, y, z), DOMMatrix/rotateAxisAngleSelf(x, y), DOMMatrix/rotateAxisAngleSelf(x), DOMMatrix/rotateAxisAngleSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-rotateaxisangleself-x-y-z-angle-angle"><code><c- g>angle</c-></code><a class="self-link" href="#dom-dommatrix-rotateaxisangleself-x-y-z-angle-angle"></a></dfn> = 0);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②⑥"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-skewxself" id="ref-for-dom-dommatrix-skewxself"><c- g>skewXSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/skewXSelf(sx), DOMMatrix/skewXSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-skewxself-sx-sx"><code><c- g>sx</c-></code><a class="self-link" href="#dom-dommatrix-skewxself-sx-sx"></a></dfn> = 0);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②⑦"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-skewyself" id="ref-for-dom-dommatrix-skewyself"><c- g>skewYSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/skewYSelf(sy), DOMMatrix/skewYSelf()" data-dfn-type="argument" data-export id="dom-dommatrix-skewyself-sy-sy"><code><c- g>sy</c-></code><a class="self-link" href="#dom-dommatrix-skewyself-sy-sy"></a></dfn> = 0);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②⑧"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-invertself" id="ref-for-dom-dommatrix-invertself"><c- g>invertSelf</c-></a>();

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑨"><c- g>Exposed</c-></a>=<c- n>Window</c->] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②⑨"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-setmatrixvalue" id="ref-for-dom-dommatrix-setmatrixvalue"><c- g>setMatrixValue</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="DOMMatrix/setMatrixValue(transformList)" data-dfn-type="argument" data-export id="dom-dommatrix-setmatrixvalue-transformlist-transformlist"><code><c- g>transformList</c-></code><a class="self-link" href="#dom-dommatrix-setmatrixvalue-transformlist-transformlist"></a></dfn>);
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-dommatrix2dinit"><code><c- g>DOMMatrix2DInit</c-></code></dfn> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix2DInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrix2dinit-a"><code><c- g>a</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix2DInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrix2dinit-b"><code><c- g>b</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④②"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix2DInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrix2dinit-c"><code><c- g>c</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④③"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix2DInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrix2dinit-d"><code><c- g>d</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④④"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix2DInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrix2dinit-e"><code><c- g>e</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix2DInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrix2dinit-f"><code><c- g>f</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix2DInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrix2dinit-m11"><code><c- g>m11</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix2DInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrix2dinit-m12"><code><c- g>m12</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix2DInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrix2dinit-m21"><code><c- g>m21</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix2DInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrix2dinit-m22"><code><c- g>m22</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix2DInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrix2dinit-m41"><code><c- g>m41</c-></code></dfn>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix2DInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrix2dinit-m42"><code><c- g>m42</c-></code></dfn>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-dommatrixinit"><code><c- g>DOMMatrixInit</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#dictdef-dommatrix2dinit" id="ref-for-dictdef-dommatrix2dinit"><c- n>DOMMatrix2DInit</c-></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤②"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMMatrixInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrixinit-m13"><code><c- g>m13</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤③"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMMatrixInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrixinit-m14"><code><c- g>m14</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤④"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMMatrixInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrixinit-m23"><code><c- g>m23</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMMatrixInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrixinit-m24"><code><c- g>m24</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMMatrixInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrixinit-m31"><code><c- g>m31</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMMatrixInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrixinit-m32"><code><c- g>m32</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="1" data-dfn-for="DOMMatrixInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrixinit-m33"><code><c- g>m33</c-></code></dfn> = 1;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMMatrixInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrixinit-m34"><code><c- g>m34</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑥⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0" data-dfn-for="DOMMatrixInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrixinit-m43"><code><c- g>m43</c-></code></dfn> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="1" data-dfn-for="DOMMatrixInit" data-dfn-type="dict-member" data-export data-type="unrestricted double " id="dom-dommatrixinit-m44"><code><c- g>m44</c-></code></dfn> = 1;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixInit" data-dfn-type="dict-member" data-export data-type="boolean " id="dom-dommatrixinit-is2d"><code><c- g>is2D</c-></code></dfn>;
};
</pre>
   <p>The following algorithms assume that <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly⑤">DOMMatrixReadOnly</a></code> objects have the internal member
variables <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-m11-element">m11 element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-m12-element">m12 element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-m13-element">m13 element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-m14-element">m14 element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-lt="m21 element" data-noexport id="matrix-m21-element">m21
element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-m22-element">m22 element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-m23-element">m23 element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-m24-element">m24 element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-m31-element">m31 element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-lt="m32 element" data-noexport id="matrix-m32-element">m32
element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-m33-element">m33 element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-m34-element">m34 element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-m41-element">m41 element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-m42-element">m42 element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-lt="m43 element" data-noexport id="matrix-m43-element">m43
element</dfn>, <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-m44-element">m44 element</dfn> and <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d①">is 2D</a>. <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly⑥">DOMMatrixReadOnly</a></code> as well as the inheriting interface <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix③⓪">DOMMatrix</a></code> must be able to access and
set the value of these variables.</p>
   <p>An interface returning an <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly⑦">DOMMatrixReadOnly</a></code> object by an attribute or function may be able to
modify internal member variable values. Such an interface must specify this ability explicitly in
prose.</p>
   <p>Internal member variables must not be exposed in any way.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix③①">DOMMatrix</a></code> and <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly⑧">DOMMatrixReadOnly</a></code> interfaces replace the <code>SVGMatrix</code> interface from SVG. <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a></p>
   <h3 class="heading settled" data-level="6.1" id="dommatrixinit-dictionary"><span class="secno">6.1. </span><span class="content">DOMMatrix2DInit and DOMMatrixInit dictionaries</span><a class="self-link" href="#dommatrixinit-dictionary"></a></h3>
   <p>To <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-validate-and-fixup-2d">validate and fixup (2D)</dfn> a <code class="idl"><a data-link-type="idl" href="#dictdef-dommatrix2dinit" id="ref-for-dictdef-dommatrix2dinit①">DOMMatrix2DInit</a></code> or <code class="idl"><a data-link-type="idl" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit⑥">DOMMatrixInit</a></code> dictionary <var>dict</var>, run the following steps:</p>
   <ol>
    <li data-md>
     <p>If if at least one of the following conditions are true for <var>dict</var>, then throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror">TypeError</a></code> exception and abort these steps.</p>
     <ul>
      <li data-md>
       <p><code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-a" id="ref-for-dom-dommatrix2dinit-a">a</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m11" id="ref-for-dom-dommatrix2dinit-m11">m11</a></code> are both present and <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-samevaluezero" id="ref-for-sec-samevaluezero">SameValueZero</a>(<code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-a" id="ref-for-dom-dommatrix2dinit-a①">a</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m11" id="ref-for-dom-dommatrix2dinit-m11①">m11</a></code>) is <code>false</code>.</p>
      <li data-md>
       <p><code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-b" id="ref-for-dom-dommatrix2dinit-b">b</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m12" id="ref-for-dom-dommatrix2dinit-m12">m12</a></code> are both present and <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-samevaluezero" id="ref-for-sec-samevaluezero①">SameValueZero</a>(<code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-b" id="ref-for-dom-dommatrix2dinit-b①">b</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m12" id="ref-for-dom-dommatrix2dinit-m12①">m12</a></code>) is <code>false</code>.</p>
      <li data-md>
       <p><code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-c" id="ref-for-dom-dommatrix2dinit-c">c</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m21" id="ref-for-dom-dommatrix2dinit-m21">m21</a></code> are both present and <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-samevaluezero" id="ref-for-sec-samevaluezero②">SameValueZero</a>(<code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-c" id="ref-for-dom-dommatrix2dinit-c①">c</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m21" id="ref-for-dom-dommatrix2dinit-m21①">m21</a></code>) is <code>false</code>.</p>
      <li data-md>
       <p><code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-d" id="ref-for-dom-dommatrix2dinit-d">d</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m22" id="ref-for-dom-dommatrix2dinit-m22">m22</a></code> are both present and <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-samevaluezero" id="ref-for-sec-samevaluezero③">SameValueZero</a>(<code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-d" id="ref-for-dom-dommatrix2dinit-d①">d</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m22" id="ref-for-dom-dommatrix2dinit-m22①">m22</a></code>) is <code>false</code>.</p>
      <li data-md>
       <p><code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-e" id="ref-for-dom-dommatrix2dinit-e">e</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m41" id="ref-for-dom-dommatrix2dinit-m41">m41</a></code> are both present and <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-samevaluezero" id="ref-for-sec-samevaluezero④">SameValueZero</a>(<code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-e" id="ref-for-dom-dommatrix2dinit-e①">e</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m41" id="ref-for-dom-dommatrix2dinit-m41①">m41</a></code>) is <code>false</code>.</p>
      <li data-md>
       <p><code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-f" id="ref-for-dom-dommatrix2dinit-f">f</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m42" id="ref-for-dom-dommatrix2dinit-m42">m42</a></code> are both present and <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-samevaluezero" id="ref-for-sec-samevaluezero⑤">SameValueZero</a>(<code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-f" id="ref-for-dom-dommatrix2dinit-f①">f</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m42" id="ref-for-dom-dommatrix2dinit-m42①">m42</a></code>) is <code>false</code>.</p>
     </ul>
    <li data-md>
     <p>If <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m11" id="ref-for-dom-dommatrix2dinit-m11②">m11</a></code> is not present then set it to the value of member <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-a" id="ref-for-dom-dommatrix2dinit-a②">a</a></code>, or value <span class="css">1</span> if <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-a" id="ref-for-dom-dommatrix2dinit-a③">a</a></code> is also not present.</p>
    <li data-md>
     <p>If <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m12" id="ref-for-dom-dommatrix2dinit-m12②">m12</a></code> is not present then set it to the value of member <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-b" id="ref-for-dom-dommatrix2dinit-b②">b</a></code>, or value <span class="css">0</span> if <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-b" id="ref-for-dom-dommatrix2dinit-b③">b</a></code> is also not present.</p>
    <li data-md>
     <p>If <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m21" id="ref-for-dom-dommatrix2dinit-m21②">m21</a></code> is not present then set it to the value of member <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-c" id="ref-for-dom-dommatrix2dinit-c②">c</a></code>, or value <span class="css">0</span> if <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-c" id="ref-for-dom-dommatrix2dinit-c③">c</a></code> is also not present.</p>
    <li data-md>
     <p>If <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m22" id="ref-for-dom-dommatrix2dinit-m22②">m22</a></code> is not present then set it to the value of member <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-d" id="ref-for-dom-dommatrix2dinit-d②">d</a></code>, or value <span class="css">1</span> if <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-d" id="ref-for-dom-dommatrix2dinit-d③">d</a></code> is also not present.</p>
    <li data-md>
     <p>If <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m41" id="ref-for-dom-dommatrix2dinit-m41②">m41</a></code> is not present then set it to the value of member <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-e" id="ref-for-dom-dommatrix2dinit-e②">e</a></code>, or value <span class="css">0</span> if <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-e" id="ref-for-dom-dommatrix2dinit-e③">e</a></code> is also not present.</p>
    <li data-md>
     <p>If <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m42" id="ref-for-dom-dommatrix2dinit-m42②">m42</a></code> is not present then set it to the value of member <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-f" id="ref-for-dom-dommatrix2dinit-f②">f</a></code>, or value <span class="css">0</span> if <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-f" id="ref-for-dom-dommatrix2dinit-f③">f</a></code> is also not present.</p>
   </ol>
   <p class="note" role="note"><span>Note:</span> The <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-samevaluezero" id="ref-for-sec-samevaluezero⑥">SameValueZero</a> comparison algorithm returns <code>true</code> for two <span class="css">NaN</span> values, and also for <span class="css">0</span> and <span class="css">-0</span>. <a data-link-type="biblio" href="#biblio-ecma-262">[ECMA-262]</a></p>
   <p>To <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-noexport id="matrix-validate-and-fixup">validate and fixup</dfn> a <code class="idl"><a data-link-type="idl" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit⑦">DOMMatrixInit</a></code> dictionary <var>dict</var>,
run the following steps:</p>
   <ol>
    <li data-md>
     <p><a data-link-type="dfn" href="#matrix-validate-and-fixup-2d" id="ref-for-matrix-validate-and-fixup-2d">Validate and fixup (2D)</a> <var>dict</var>.</p>
     <p></p>
    <li data-md>
     <p>If <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-is2d" id="ref-for-dom-dommatrixinit-is2d">is2D</a></code> is <code>true</code> and: at least one of <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m13" id="ref-for-dom-dommatrixinit-m13">m13</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m14" id="ref-for-dom-dommatrixinit-m14">m14</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m23" id="ref-for-dom-dommatrixinit-m23">m23</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m24" id="ref-for-dom-dommatrixinit-m24">m24</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m31" id="ref-for-dom-dommatrixinit-m31">m31</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m32" id="ref-for-dom-dommatrixinit-m32">m32</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m34" id="ref-for-dom-dommatrixinit-m34">m34</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m43" id="ref-for-dom-dommatrixinit-m43">m43</a></code> are present with a value other
than <span class="css">0</span> or <span class="css">-0</span>, or at least one of <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m33" id="ref-for-dom-dommatrixinit-m33">m33</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m44" id="ref-for-dom-dommatrixinit-m44">m44</a></code> are present
with a value other than <span class="css">1</span>, then throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror①">TypeError</a></code> exception and abort these steps.</p>
    <li data-md>
     <p>If <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-is2d" id="ref-for-dom-dommatrixinit-is2d①">is2D</a></code> is not present and at least one of <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m13" id="ref-for-dom-dommatrixinit-m13①">m13</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m14" id="ref-for-dom-dommatrixinit-m14①">m14</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m23" id="ref-for-dom-dommatrixinit-m23①">m23</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m24" id="ref-for-dom-dommatrixinit-m24①">m24</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m31" id="ref-for-dom-dommatrixinit-m31①">m31</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m32" id="ref-for-dom-dommatrixinit-m32①">m32</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m34" id="ref-for-dom-dommatrixinit-m34①">m34</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m43" id="ref-for-dom-dommatrixinit-m43①">m43</a></code> are present with a value other
than <span class="css">0</span> or <span class="css">-0</span>, or at least one of <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m33" id="ref-for-dom-dommatrixinit-m33①">m33</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m44" id="ref-for-dom-dommatrixinit-m44①">m44</a></code> are present
with a value other than <span class="css">1</span>, set <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-is2d" id="ref-for-dom-dommatrixinit-is2d②">is2D</a></code> to <code>false</code>.</p>
    <li data-md>
     <p>If <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-is2d" id="ref-for-dom-dommatrixinit-is2d③">is2D</a></code> is still not present, set it to <code>true</code>.</p>
   </ol>
   <h3 class="heading settled algorithm" data-algorithm="Parsing a string into an abstract matrix" data-level="6.2" id="dommatrix-parse"><span class="secno">6.2. </span><span class="content">Parsing a string into an abstract matrix</span><a class="self-link" href="#dommatrix-parse"></a></h3>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="parse-a-string-into-an-abstract-matrix">parse a string into an abstract matrix</dfn>, given a string <var>transformList</var>,
means to run the following steps. It will either return a <a data-link-type="dfn" href="#4x4-abstract-matrix" id="ref-for-4x4-abstract-matrix">4x4 abstract matrix</a> and a boolean <var>2dTransform</var>, or failure.</p>
   <ol>
    <li data-md>
     <p>If <var>transformList</var> is the empty string, set it to the string "<code>matrix(1, 0, 0,
1, 0, 0)</code>".</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar">Parse</a> <var>transformList</var> into <var>parsedValue</var> given the grammar
for the CSS <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform" id="ref-for-propdef-transform">transform</a> property. The result will be a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-transforms-1/#typedef-transform-list" id="ref-for-typedef-transform-list">&lt;transform-list></a>, the keyword <span class="css">none</span>, or failure. If <var>parsedValue</var> is failure, or any <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-transforms-2/#typedef-transform-function" id="ref-for-typedef-transform-function">&lt;transform-function></a> has <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value" title="Expands to: em | vb | ch | cm | vh | vi | in | ex | vw | ic | pt | px | lh | pc | rem | rlh | vmax | advance measure | vmin | mm | cap | q">&lt;length></a> values without <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#absolute-length" id="ref-for-absolute-length">absolute length</a> units, or any keyword other
than <span class="css">none</span> is used, then return failure. <a data-link-type="biblio" href="#biblio-css3-syntax">[CSS3-SYNTAX]</a> <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
    <li data-md>
     <p>If <var>parsedValue</var> is <span class="css">none</span>, set <var>parsedValue</var> to a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-transforms-1/#typedef-transform-list" id="ref-for-typedef-transform-list①">&lt;transform-list></a> containing a single identity matrix.</p>
    <li data-md>
     <p>Let <var>2dTransform</var> track the 2D/3D dimension status of <var>parsedValue</var>.</p>
     <dl class="switch">
      <dt data-md>If <var>parsedValue</var> consists of any <a href="https://drafts.csswg.org/css-transforms-1/#transform-primitives">three-dimensional
transform functions</a>
      <dd data-md>
       <p>Set <var>2dTransform</var> to <code>false</code>.</p>
      <dt data-md>Otherwise
      <dd data-md>
       <p>Set <var>2dTransform</var> to <code>true</code>.</p>
     </dl>
    <li data-md>
     <p>Transform all <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-transforms-2/#typedef-transform-function" id="ref-for-typedef-transform-function①">&lt;transform-function></a>s to <a data-link-type="dfn" href="#4x4-abstract-matrix" id="ref-for-4x4-abstract-matrix①">4x4 abstract
matrices</a> by following the “<a href="https://drafts.csswg.org/css-transforms-1/#mathematical-description">Mathematical Description
of Transform Functions</a>”. <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
    <li data-md>
     <p>Let <var>matrix</var> be a <a data-link-type="dfn" href="#4x4-abstract-matrix" id="ref-for-4x4-abstract-matrix②">4x4 abstract matrix</a> as shown in the initial
figure of this section. <a data-link-type="dfn" href="#post-multiply" id="ref-for-post-multiply①">Post-multiply</a> all matrices from left to right and set <var>matrix</var> to this product.</p>
    <li data-md>
     <p>Return <var>matrix</var> and <var>2dTransform</var>.</p>
   </ol>
   <h3 class="heading settled" data-level="6.3" id="dommatrix-create"><span class="secno">6.3. </span><span class="content">Creating DOMMatrixReadOnly and DOMMatrix objects</span><a class="self-link" href="#dommatrix-create"></a></h3>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="create-a-2d-matrix">create a 2d matrix</dfn> of type <var>type</var> being either <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly⑨">DOMMatrixReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix③②">DOMMatrix</a></code>, with a sequence <var>init</var> of 6 elements, follow these steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>matrix</var> be a new instance of <var>type</var>.</p>
    <li data-md>
     <p>Set <a data-link-type="dfn" href="#matrix-m11-element" id="ref-for-matrix-m11-element">m11 element</a>, <a data-link-type="dfn" href="#matrix-m12-element" id="ref-for-matrix-m12-element">m12 element</a>, <a data-link-type="dfn" href="#matrix-m21-element" id="ref-for-matrix-m21-element">m21
element</a>, <a data-link-type="dfn" href="#matrix-m22-element" id="ref-for-matrix-m22-element">m22 element</a>, <a data-link-type="dfn" href="#matrix-m41-element" id="ref-for-matrix-m41-element">m41 element</a> and <a data-link-type="dfn" href="#matrix-m42-element" id="ref-for-matrix-m42-element">m42
element</a> to the values of <var>init</var> in order starting with the first value.</p>
    <li data-md>
     <p>Set <a data-link-type="dfn" href="#matrix-m13-element" id="ref-for-matrix-m13-element">m13 element</a>, <a data-link-type="dfn" href="#matrix-m14-element" id="ref-for-matrix-m14-element">m14 element</a>, <a data-link-type="dfn" href="#matrix-m23-element" id="ref-for-matrix-m23-element">m23
element</a>, <a data-link-type="dfn" href="#matrix-m24-element" id="ref-for-matrix-m24-element">m24 element</a>, <a data-link-type="dfn" href="#matrix-m31-element" id="ref-for-matrix-m31-element">m31 element</a>, <a data-link-type="dfn" href="#matrix-m32-element" id="ref-for-matrix-m32-element">m32
element</a>, <a data-link-type="dfn" href="#matrix-m34-element" id="ref-for-matrix-m34-element">m34 element</a>, and <a data-link-type="dfn" href="#matrix-m43-element" id="ref-for-matrix-m43-element">m43 element</a> to <span class="css">0</span>.</p>
    <li data-md>
     <p>Set <a data-link-type="dfn" href="#matrix-m33-element" id="ref-for-matrix-m33-element">m33 element</a> and <a data-link-type="dfn" href="#matrix-m44-element" id="ref-for-matrix-m44-element">m44 element</a> to <span class="css">1</span>.</p>
    <li data-md>
     <p>Set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d②">is 2D</a> to <code>true</code>.</p>
    <li data-md>
     <p>Return <var>matrix</var></p>
   </ol>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="create-a-3d-matrix">create a 3d matrix</dfn> with <var>type</var> being either <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly①⓪">DOMMatrixReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix③③">DOMMatrix</a></code>, with a sequence <var>init</var> of 16 elements, follow these steps:</p>
   <ol>
    <li data-md>
     <p>Let <var>matrix</var> be a new instance of <var>type</var>.</p>
    <li data-md>
     <p>Set <a data-link-type="dfn" href="#matrix-m11-element" id="ref-for-matrix-m11-element①">m11 element</a> to <a data-link-type="dfn" href="#matrix-m44-element" id="ref-for-matrix-m44-element①">m44 element</a> to the values of <var>init</var> in column-major order.</p>
    <li data-md>
     <p>Set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d③">is 2D</a> to <code>false</code>.</p>
    <li data-md>
     <p>Return <var>matrix</var></p>
   </ol>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="constructor" data-export data-lt="DOMMatrixReadOnly(init)|constructor(init)|DOMMatrixReadOnly()|constructor()" id="dom-dommatrixreadonly-dommatrixreadonly"><code>DOMMatrixReadOnly(<var>init</var>)</code></dfn> and the <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="constructor" data-export data-lt="DOMMatrix(init)|constructor(init)|DOMMatrix()|constructor()" id="dom-dommatrix-dommatrix"><code>DOMMatrix(<var>init</var>)</code></dfn> constructors
must follow these steps:</p>
   <dl class="switch">
    <dt data-md>If <var>init</var> is omitted
    <dd data-md>
     <p>Return the result of invoking <a data-link-type="dfn" href="#create-a-2d-matrix" id="ref-for-create-a-2d-matrix">create a 2d matrix</a> of type <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly①①">DOMMatrixReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix③④">DOMMatrix</a></code> as appropriate, with the sequence [<span class="css">1</span>, <span class="css">0</span>, <span class="css">0</span>, <span class="css">1</span>, <span class="css">0</span>, <span class="css">0</span>].</p>
    <dt data-md>If <var>init</var> is a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③">DOMString</a></code>
    <dd data-md>
     <ol>
      <li data-md>
       <p>If <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object">current global object</a> is not a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window">Window</a></code> object, then throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror②">TypeError</a></code> exception.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="#parse-a-string-into-an-abstract-matrix" id="ref-for-parse-a-string-into-an-abstract-matrix">Parse <var>init</var> into an abstract
matrix</a>, and let <var>matrix</var> and <var>2dTransform</var> be the result. If the result is
failure, then throw a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#syntaxerror" id="ref-for-syntaxerror">SyntaxError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException">DOMException</a></code>.</p>
      <li data-md>
       <dl class="switch">
        <dt data-md>If <var>2dTransform</var> is <code>true</code>
        <dd data-md>
         <p>Return the result of invoking <a data-link-type="dfn" href="#create-a-2d-matrix" id="ref-for-create-a-2d-matrix①">create a 2d matrix</a> of type <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly①②">DOMMatrixReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix③⑤">DOMMatrix</a></code> as appropriate, with a sequence of numbers, the values being the elements <var>m11</var>, <var>m12</var>, <var>m21</var>, <var>m22</var>, <var>m41</var> and <var>m42</var> of <var>matrix</var>.</p>
        <dt data-md>Otherwise
        <dd data-md>
         <p>Return the result of invoking <a data-link-type="dfn" href="#create-a-3d-matrix" id="ref-for-create-a-3d-matrix">create a 3d matrix</a> of type <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly①③">DOMMatrixReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix③⑥">DOMMatrix</a></code> as appropriate, with a sequence of numbers, the values being the 16 elements of <var>matrix</var>.</p>
       </dl>
     </ol>
    <dt data-md>If <var>init</var> is a sequence with 6 elements
    <dd data-md>
     <p>Return the result of invoking <a data-link-type="dfn" href="#create-a-2d-matrix" id="ref-for-create-a-2d-matrix②">create a 2d matrix</a> of type <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly①④">DOMMatrixReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix③⑦">DOMMatrix</a></code> as appropriate, with the sequence <var>init</var>.</p>
    <dt data-md>If <var>init</var> is a sequence with 16 elements
    <dd data-md>
     <p>Return the result of invoking <a data-link-type="dfn" href="#create-a-3d-matrix" id="ref-for-create-a-3d-matrix①">create a 3d matrix</a> of type <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly①⑤">DOMMatrixReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix③⑧">DOMMatrix</a></code> as appropriate, with the sequence <var>init</var>.</p>
    <dt data-md>Otherwise
    <dd data-md>
     <p>Throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror③">TypeError</a></code> exception.</p>
   </dl>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export data-lt="fromMatrix(other)|fromMatrix()" id="dom-dommatrixreadonly-frommatrix"><code>fromMatrix(<var>other</var>)</code></dfn> static method on <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly①⑥">DOMMatrixReadOnly</a></code> must <a data-link-type="dfn" href="#create-a-dommatrixreadonly-from-the-dictionary" id="ref-for-create-a-dommatrixreadonly-from-the-dictionary">create a <code>DOMMatrixReadOnly</code> from the dictionary</a> <var>other</var>.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export data-lt="fromMatrix(other)|fromMatrix()" id="dom-dommatrix-frommatrix"><code>fromMatrix(<var>other</var>)</code></dfn> static method on <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix③⑨">DOMMatrix</a></code> must <a data-link-type="dfn" href="#create-a-dommatrix-from-the-dictionary" id="ref-for-create-a-dommatrix-from-the-dictionary①">create a <code>DOMMatrix</code> from the dictionary</a> <var>other</var>.</p>
   <p>To <dfn data-dfn-type="dfn" data-export data-lt="create a DOMMatrixReadOnly from the 2D dictionary" id="create-a-dommatrixreadonly-from-the-2d-dictionary">create a <code>DOMMatrixReadOnly</code> from a 2D dictionary<a class="self-link" href="#create-a-dommatrixreadonly-from-the-2d-dictionary"></a></dfn> <var>other</var> or to <dfn data-dfn-type="dfn" data-export data-lt="create a
DOMMatrix from the 2D dictionary" id="create-a-dommatrix-from-the-2d-dictionary">create a <code>DOMMatrix</code> from a 2D dictionary<a class="self-link" href="#create-a-dommatrix-from-the-2d-dictionary"></a></dfn> <var>other</var>, follow these steps:</p>
   <ol>
    <li data-md>
     <p><a data-link-type="dfn" href="#matrix-validate-and-fixup-2d" id="ref-for-matrix-validate-and-fixup-2d①">Validate and fixup (2D)</a> <var>other</var>.</p>
    <li data-md>
     <p>Return the result of invoking <a data-link-type="dfn" href="#create-a-2d-matrix" id="ref-for-create-a-2d-matrix③">create a 2d matrix</a> of type <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly①⑦">DOMMatrixReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix④⓪">DOMMatrix</a></code> as appropriate, with a sequence of numbers, the values being the 6 elements <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m11" id="ref-for-dom-dommatrix2dinit-m11③">m11</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m12" id="ref-for-dom-dommatrix2dinit-m12③">m12</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m21" id="ref-for-dom-dommatrix2dinit-m21③">m21</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m22" id="ref-for-dom-dommatrix2dinit-m22③">m22</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m41" id="ref-for-dom-dommatrix2dinit-m41③">m41</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m42" id="ref-for-dom-dommatrix2dinit-m42③">m42</a></code> of <var>other</var> in the given order.</p>
   </ol>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="create a DOMMatrixReadOnly from the dictionary" id="create-a-dommatrixreadonly-from-the-dictionary">create a <code>DOMMatrixReadOnly</code> from a dictionary</dfn> <var>other</var> or to <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="create a
DOMMatrix from the dictionary" data-noexport id="create-a-dommatrix-from-the-dictionary">create a <code>DOMMatrix</code> from a dictionary</dfn> <var>other</var>, follow these steps:</p>
   <ol>
    <li data-md>
     <p><a data-link-type="dfn" href="#matrix-validate-and-fixup" id="ref-for-matrix-validate-and-fixup">Validate and fixup</a> <var>other</var>.</p>
    <li data-md>
     <dl class="switch">
      <dt data-md>If the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-is2d" id="ref-for-dom-dommatrixinit-is2d④">is2D</a></code> dictionary member of <var>other</var> is <code>true</code>
      <dd data-md>
       <p>Return the result of invoking <a data-link-type="dfn" href="#create-a-2d-matrix" id="ref-for-create-a-2d-matrix④">create a 2d matrix</a> of type <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly①⑧">DOMMatrixReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix④①">DOMMatrix</a></code> as appropriate, with a sequence of numbers, the values being the 6 elements <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m11" id="ref-for-dom-dommatrix2dinit-m11④">m11</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m12" id="ref-for-dom-dommatrix2dinit-m12④">m12</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m21" id="ref-for-dom-dommatrix2dinit-m21④">m21</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m22" id="ref-for-dom-dommatrix2dinit-m22④">m22</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m41" id="ref-for-dom-dommatrix2dinit-m41④">m41</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m42" id="ref-for-dom-dommatrix2dinit-m42④">m42</a></code> of <var>other</var> in the given order.</p>
      <dt data-md>Otherwise
      <dd data-md>
       <p>Return the result of invoking <a data-link-type="dfn" href="#create-a-3d-matrix" id="ref-for-create-a-3d-matrix②">create a 3d matrix</a> of type <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly①⑨">DOMMatrixReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix④②">DOMMatrix</a></code> as appropriate, with a sequence of numbers, the values being the 16 elements <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m11" id="ref-for-dom-dommatrix2dinit-m11⑤">m11</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrix2dinit-m12" id="ref-for-dom-dommatrix2dinit-m12⑤">m12</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m13" id="ref-for-dom-dommatrixinit-m13②">m13</a></code>, ..., <code class="idl"><a data-link-type="idl" href="#dom-dommatrixinit-m44" id="ref-for-dom-dommatrixinit-m44②">m44</a></code> of <var>other</var> in the given order.</p>
     </dl>
   </ol>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export id="dom-dommatrixreadonly-fromfloat32array"><code>fromFloat32Array(<var>array32</var>)</code></dfn> static method on <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly②⓪">DOMMatrixReadOnly</a></code> and the <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export id="dom-dommatrix-fromfloat32array"><code>fromFloat32Array(<var>array32</var>)</code></dfn> static
method on <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix④③">DOMMatrix</a></code> must follow these steps:</p>
   <dl class="switch">
    <dt data-md>If <var>array32</var> has 6 elements
    <dd data-md>
     <p>Return the result of invoking <a data-link-type="dfn" href="#create-a-2d-matrix" id="ref-for-create-a-2d-matrix⑤">create a 2d matrix</a> of type <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly②①">DOMMatrixReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix④④">DOMMatrix</a></code> as appropriate, with a sequence of numbers taking the values from <var>array32</var> in the provided order.</p>
    <dt data-md>If <var>array32</var> has 16 elements
    <dd data-md>
     <p>Return the result of invoking <a data-link-type="dfn" href="#create-a-3d-matrix" id="ref-for-create-a-3d-matrix③">create a 3d matrix</a> of type <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly②②">DOMMatrixReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix④⑤">DOMMatrix</a></code> as appropriate, with a sequence of numbers taking the values from <var>array32</var> in the provided order.</p>
    <dt data-md>Otherwise
    <dd data-md>
     <p>Throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror④">TypeError</a></code> exception.</p>
   </dl>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export id="dom-dommatrixreadonly-fromfloat64array"><code>fromFloat64Array(<var>array64</var>)</code></dfn> static method on <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly②③">DOMMatrixReadOnly</a></code> and the <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export id="dom-dommatrix-fromfloat64array"><code>fromFloat64Array(<var>array64</var>)</code></dfn> static
method on <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix④⑥">DOMMatrix</a></code> must follow these steps:</p>
   <dl class="switch">
    <dt data-md>If <var>array64</var> has 6 elements
    <dd data-md>
     <p>Return the result of invoking <a data-link-type="dfn" href="#create-a-2d-matrix" id="ref-for-create-a-2d-matrix⑥">create a 2d matrix</a> of type <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly②④">DOMMatrixReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix④⑦">DOMMatrix</a></code> as appropriate, with a sequence of numbers taking the values from <var>array64</var> in the provided order.</p>
    <dt data-md>If <var>array32</var> has 16 elements
    <dd data-md>
     <p>Return the result of invoking <a data-link-type="dfn" href="#create-a-3d-matrix" id="ref-for-create-a-3d-matrix④">create a 3d matrix</a> of type <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly②⑤">DOMMatrixReadOnly</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix④⑧">DOMMatrix</a></code> as appropriate, with a sequence of numbers taking the values from <var>array64</var> in the provided order.</p>
    <dt data-md>Otherwise
    <dd data-md>
     <p>Throw a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror⑤">TypeError</a></code> exception.</p>
   </dl>
   <h3 class="heading settled" data-level="6.4" id="dommatrix-attributes"><span class="secno">6.4. </span><span class="content">DOMMatrix attributes</span><a class="self-link" href="#dommatrix-attributes"></a></h3>
   <p>The following attributes <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m11" id="ref-for-dom-dommatrixreadonly-m11②">m11</a></code> to <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m44" id="ref-for-dom-dommatrixreadonly-m44②">m44</a></code> correspond to the
16 items of the matrix interfaces.</p>
   <div>
     The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m11"><code>m11</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-a"><code>a</code></dfn> attributes, on getting, must
return the <a data-link-type="dfn" href="#matrix-m11-element" id="ref-for-matrix-m11-element②">m11 element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix④⑨">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m11" id="ref-for-dom-dommatrixreadonly-m11③">m11</a></code> or the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-a" id="ref-for-dom-dommatrixreadonly-a②">a</a></code> attribute must set the <span id="ref-for-matrix-m11-element③">m11 element</span> to
the new value. 
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m12"><code>m12</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-b"><code>b</code></dfn> attributes, on getting, must
return the <a data-link-type="dfn" href="#matrix-m12-element" id="ref-for-matrix-m12-element①">m12 element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑤⓪">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m12" id="ref-for-dom-dommatrixreadonly-m12②">m12</a></code> or the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-b" id="ref-for-dom-dommatrixreadonly-b②">b</a></code> attribute must set the <span id="ref-for-matrix-m12-element②">m12 element</span> to
the new value.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m13"><code>m13</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#matrix-m13-element" id="ref-for-matrix-m13-element①">m13
element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑤①">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m13" id="ref-for-dom-dommatrixreadonly-m13②">m13</a></code> attribute must
set the <span id="ref-for-matrix-m13-element②">m13 element</span> to the new value and, if the new value is not <span class="css">0</span> or <span class="css">-0</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d④">is 2D</a> to <code>false</code>.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m14"><code>m14</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#matrix-m14-element" id="ref-for-matrix-m14-element①">m14
element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑤②">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m14" id="ref-for-dom-dommatrixreadonly-m14②">m14</a></code> attribute must
set the <span id="ref-for-matrix-m14-element②">m14 element</span> to the new value and, if the new value is not <span class="css">0</span> or <span class="css">-0</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d⑤">is 2D</a> to <code>false</code>.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m21"><code>m21</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-c"><code>c</code></dfn> attributes, on getting, must
return the <a data-link-type="dfn" href="#matrix-m21-element" id="ref-for-matrix-m21-element①">m21 element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑤③">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m21" id="ref-for-dom-dommatrixreadonly-m21②">m21</a></code> or the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-c" id="ref-for-dom-dommatrixreadonly-c②">c</a></code> attribute must set the <span id="ref-for-matrix-m21-element②">m21 element</span> to
the new value.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m22"><code>m22</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-d"><code>d</code></dfn> attributes, on getting, must
return the <a data-link-type="dfn" href="#matrix-m22-element" id="ref-for-matrix-m22-element①">m22 element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑤④">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m22" id="ref-for-dom-dommatrixreadonly-m22②">m22</a></code> or the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-d" id="ref-for-dom-dommatrixreadonly-d②">d</a></code> attribute must set the <span id="ref-for-matrix-m22-element②">m22 element</span> to
the new value.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m23"><code>m23</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#matrix-m23-element" id="ref-for-matrix-m23-element①">m23
element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑤⑤">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m23" id="ref-for-dom-dommatrixreadonly-m23②">m23</a></code> attribute must
set the <span id="ref-for-matrix-m23-element②">m23 element</span> to the new value and, if the new value is not <span class="css">0</span> or <span class="css">-0</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d⑥">is 2D</a> to <code>false</code>.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m24"><code>m24</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#matrix-m24-element" id="ref-for-matrix-m24-element①">m24
element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑤⑥">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m24" id="ref-for-dom-dommatrixreadonly-m24②">m24</a></code> attribute must
set the <span id="ref-for-matrix-m24-element②">m24 element</span> to the new value and, if the new value is not <span class="css">0</span> or <span class="css">-0</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d⑦">is 2D</a> to <code>false</code>.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m31"><code>m31</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#matrix-m31-element" id="ref-for-matrix-m31-element①">m31
element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑤⑦">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m31" id="ref-for-dom-dommatrixreadonly-m31②">m31</a></code> attribute must
set the <span id="ref-for-matrix-m31-element②">m31 element</span> to the new value and, if the new value is not <span class="css">0</span> or <span class="css">-0</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d⑧">is 2D</a> to <code>false</code>.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m32"><code>m32</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#matrix-m32-element" id="ref-for-matrix-m32-element①">m32
element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑤⑧">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m32" id="ref-for-dom-dommatrixreadonly-m32②">m32</a></code> attribute must
set the <span id="ref-for-matrix-m32-element②">m32 element</span> to the new value and, if the new value is not <span class="css">0</span> or <span class="css">-0</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d⑨">is 2D</a> to <code>false</code>.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m33"><code>m33</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#matrix-m33-element" id="ref-for-matrix-m33-element①">m33
element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑤⑨">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m33" id="ref-for-dom-dommatrixreadonly-m33②">m33</a></code> attribute must
set the <span id="ref-for-matrix-m33-element②">m33 element</span> to the new value and, if the new value is not <span class="css">1</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d①⓪">is 2D</a> to <code>false</code>.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m34"><code>m34</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#matrix-m34-element" id="ref-for-matrix-m34-element①">m34
element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑥⓪">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m34" id="ref-for-dom-dommatrixreadonly-m34②">m34</a></code> attribute must
set the <span id="ref-for-matrix-m34-element②">m34 element</span> to the new value and, if the new value is not <span class="css">0</span> or <span class="css">-0</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d①①">is 2D</a> to <code>false</code>.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m41"><code>m41</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-e"><code>e</code></dfn> attributes, on getting, must
return the <a data-link-type="dfn" href="#matrix-m41-element" id="ref-for-matrix-m41-element①">m41 element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑥①">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m41" id="ref-for-dom-dommatrixreadonly-m41②">m41</a></code> or the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-e" id="ref-for-dom-dommatrixreadonly-e②">e</a></code> attribute must set the <span id="ref-for-matrix-m41-element②">m41 element</span> to
the new value.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m42"><code>m42</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-f"><code>f</code></dfn> attributes, on getting, must
return the <a data-link-type="dfn" href="#matrix-m42-element" id="ref-for-matrix-m42-element①">m42 element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑥②">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m42" id="ref-for-dom-dommatrixreadonly-m42②">m42</a></code> or the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-f" id="ref-for-dom-dommatrixreadonly-f②">f</a></code> attribute must set the <span id="ref-for-matrix-m42-element②">m42 element</span> to
the new value.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m43"><code>m43</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#matrix-m43-element" id="ref-for-matrix-m43-element①">m43
element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑥③">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m43" id="ref-for-dom-dommatrixreadonly-m43②">m43</a></code> attribute must
set the <span id="ref-for-matrix-m43-element②">m43 element</span> to the new value and, if the new value is not <span class="css">0</span> or <span class="css">-0</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d①②">is 2D</a> to <code>false</code>.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly, DOMMatrix" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-m44"><code>m44</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="#matrix-m44-element" id="ref-for-matrix-m44-element②">m44
element</a> value. For the <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑥④">DOMMatrix</a></code> interface, setting the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m44" id="ref-for-dom-dommatrixreadonly-m44③">m44</a></code> attribute must
set the <span id="ref-for-matrix-m44-element③">m44 element</span> to the new value and, if the new value is not <span class="css">1</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d①③">is 2D</a> to <code>false</code>.</p>
   </div>
   <div class="note" role="note">
     The following attributes <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-a" id="ref-for-dom-dommatrixreadonly-a③">a</a></code> to <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-f" id="ref-for-dom-dommatrixreadonly-f③">f</a></code> correspond to the 2D
components of the matrix interfaces. 
    <p>The <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-a" id="ref-for-dom-dommatrixreadonly-a④">a</a></code> attribute is an alias to the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m11" id="ref-for-dom-dommatrixreadonly-m11④">m11</a></code> attribute.</p>
    <p>The <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-b" id="ref-for-dom-dommatrixreadonly-b③">b</a></code> attribute is an alias to the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m12" id="ref-for-dom-dommatrixreadonly-m12③">m12</a></code> attribute.</p>
    <p>The <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-c" id="ref-for-dom-dommatrixreadonly-c③">c</a></code> attribute is an alias to the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m21" id="ref-for-dom-dommatrixreadonly-m21③">m21</a></code> attribute.</p>
    <p>The <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-d" id="ref-for-dom-dommatrixreadonly-d③">d</a></code> attribute is an alias to the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m22" id="ref-for-dom-dommatrixreadonly-m22③">m22</a></code> attribute.</p>
    <p>The <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-e" id="ref-for-dom-dommatrixreadonly-e③">e</a></code> attribute is an alias to the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m41" id="ref-for-dom-dommatrixreadonly-m41③">m41</a></code> attribute.</p>
    <p>The <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-f" id="ref-for-dom-dommatrixreadonly-f④">f</a></code> attribute is an alias to the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m42" id="ref-for-dom-dommatrixreadonly-m42③">m42</a></code> attribute.</p>
   </div>
   <p>The following attributes provide status information about <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly②⑥">DOMMatrixReadOnly</a></code>.</p>
   <div>
     The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-is2d"><code>is2D</code></dfn> attribute must return the value of <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d①④">is 2D</a>. 
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="attribute" data-export id="dom-dommatrixreadonly-isidentity"><code>isIdentity</code></dfn> attribute must return <code>true</code> if <a data-link-type="dfn" href="#matrix-m12-element" id="ref-for-matrix-m12-element③">m12 element</a>, <a data-link-type="dfn" href="#matrix-m13-element" id="ref-for-matrix-m13-element③">m13 element</a>, <a data-link-type="dfn" href="#matrix-m14-element" id="ref-for-matrix-m14-element③">m14 element</a>, <a data-link-type="dfn" href="#matrix-m21-element" id="ref-for-matrix-m21-element③">m21 element</a>, <a data-link-type="dfn" href="#matrix-m23-element" id="ref-for-matrix-m23-element③">m23 element</a>, <a data-link-type="dfn" href="#matrix-m24-element" id="ref-for-matrix-m24-element③">m24 element</a>, <a data-link-type="dfn" href="#matrix-m31-element" id="ref-for-matrix-m31-element③">m31 element</a>, <a data-link-type="dfn" href="#matrix-m32-element" id="ref-for-matrix-m32-element③">m32 element</a>, <a data-link-type="dfn" href="#matrix-m34-element" id="ref-for-matrix-m34-element③">m34 element</a>, <a data-link-type="dfn" href="#matrix-m41-element" id="ref-for-matrix-m41-element③">m41 element</a>, <a data-link-type="dfn" href="#matrix-m42-element" id="ref-for-matrix-m42-element③">m42 element</a>, <a data-link-type="dfn" href="#matrix-m43-element" id="ref-for-matrix-m43-element③">m43 element</a> are <span class="css">0</span> or <span class="css">-0</span> and <a data-link-type="dfn" href="#matrix-m11-element" id="ref-for-matrix-m11-element④">m11 element</a>, <a data-link-type="dfn" href="#matrix-m22-element" id="ref-for-matrix-m22-element③">m22 element</a>, <a data-link-type="dfn" href="#matrix-m33-element" id="ref-for-matrix-m33-element③">m33
element</a>, <a data-link-type="dfn" href="#matrix-m44-element" id="ref-for-matrix-m44-element④">m44 element</a> are <span class="css">1</span>. Otherwise it must return <code>false</code>.</p>
   </div>
   <p>Every <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly②⑦">DOMMatrixReadOnly</a></code> object must be flagged with a boolean <dfn class="dfn-paneled" data-dfn-for="matrix" data-dfn-type="dfn" data-export id="matrix-is-2d">is 2D</dfn>. This flag indicates that:</p>
   <ol>
    <li data-md>
     <p>The current matrix was initialized as a 2D matrix. See individual <a href="#dommatrix-create">creators</a> for more details.</p>
    <li data-md>
     <p>Only 2D transformation operations were applied. Each <a href="#mutable-transformation-methods">mutable</a> or <a href="#immutable-transformation-methods">immutable transformation method</a> defines if <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d①⑤">is 2D</a> must be set to <code>false</code>.</p>
   </ol>
   <p class="note" role="note"><span>Note:</span> <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d①⑥">Is 2D</a> can never be set to <code>true</code> when it was set to <code>false</code> before on a <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑥⑤">DOMMatrix</a></code> object with the exception of calling the <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-setmatrixvalue" id="ref-for-dom-dommatrix-setmatrixvalue①">setMatrixValue()</a></code> method.</p>
   <h3 class="heading settled" data-level="6.5" id="immutable-transformation-methods"><span class="secno">6.5. </span><span class="content">Immutable transformation methods</span><a class="self-link" href="#immutable-transformation-methods"></a></h3>
   <p>The following methods do not modify the current matrix and return a new <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑥⑥">DOMMatrix</a></code> object.</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export data-lt="translate(tx, ty, tz)|translate(tx, ty)|translate(tx)|translate()" id="dom-dommatrixreadonly-translate"><code>translate(<var>tx</var>, <var>ty</var>, <var>tz</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Let <var>result</var> be the resulting matrix initialized to the values of the current
matrix.</p>
      <li data-md>
       <p>Perform a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-translateself" id="ref-for-dom-dommatrix-translateself①">translateSelf()</a></code> transformation on <var>result</var> with the
arguments <var>tx</var>, <var>ty</var>, <var>tz</var>.</p>
      <li data-md>
       <p>Return <var>result</var>.</p>
     </ol>
     <p>The current matrix is not modified.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export data-lt="scale(scaleX, scaleY, scaleZ, originX, originY, originZ)|scale(scaleX, scaleY, scaleZ, originX, originY)|scale(scaleX, scaleY, scaleZ, originX)|scale(scaleX, scaleY, scaleZ)|scale(scaleX, scaleY)|scale(scaleX)|scale()" id="dom-dommatrixreadonly-scale"><code>scale(<var>scaleX</var>, <var>scaleY</var>, <var>scaleZ</var>, <var>originX</var>, <var>originY</var>, <var>originZ</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>If <var>scaleY</var> is missing, set <var>scaleY</var> to the value of <var>scaleX</var>.</p>
      <li data-md>
       <p>Let <var>result</var> be the resulting matrix initialized to the values of the current
matrix.</p>
      <li data-md>
       <p>Perform a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-scaleself" id="ref-for-dom-dommatrix-scaleself①">scaleSelf()</a></code> transformation on <var>result</var> with the arguments <var>scaleX</var>, <var>scaleY</var>, <var>scaleZ</var>, <var>originX</var>, <var>originY</var>, <var>originZ</var>.</p>
      <li data-md>
       <p>Return <var>result</var>.</p>
     </ol>
     <p>The current matrix is not modified.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export data-lt="scaleNonUniform(scaleX, scaleY)|scaleNonUniform(scaleX)|scaleNonUniform()" id="dom-dommatrixreadonly-scalenonuniform"><code>scaleNonUniform(<var>scaleX</var>, <var>scaleY</var>)</code></dfn>
    <dd data-md>
     <p class="note" role="note"><span>Note:</span> Supported for legacy reasons to be compatible with <code class="idl"><a data-link-type="idl" href="#svgmatrix" id="ref-for-svgmatrix①">SVGMatrix</a></code> as defined in SVG 1.1 <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a>. Authors are encouraged to use <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-scale" id="ref-for-dom-dommatrixreadonly-scale①">scale()</a></code> instead.</p>
     <ol>
      <li data-md>
       <p>Let <var>result</var> be the resulting matrix initialized to the values of the current
matrix.</p>
      <li data-md>
       <p>Perform a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-scaleself" id="ref-for-dom-dommatrix-scaleself②">scaleSelf()</a></code> transformation on <var>result</var> with the arguments <var>scaleX</var>, <var>scaleY</var>, <i>1</i>, <i>0</i>, <i>0</i>, <i>0</i>.</p>
      <li data-md>
       <p>Return <var>result</var>.</p>
     </ol>
     <p>The current matrix is not modified.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export data-lt="scale3d(scale, originX, originY, originZ)|scale3d(scale, originX, originY)|scale3d(scale, originX)|scale3d(scale)|scale3d()" id="dom-dommatrixreadonly-scale3d"><code>scale3d(<var>scale</var>, <var>originX</var>, <var>originY</var>, <var>originZ</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Let <var>result</var> be the resulting matrix initialized to the values of the current
matrix.</p>
      <li data-md>
       <p>Perform a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-scale3dself" id="ref-for-dom-dommatrix-scale3dself①">scale3dSelf()</a></code> transformation on <var>result</var> with the
arguments <var>scale</var>, <var>originX</var>, <var>originY</var>, <var>originZ</var>.</p>
      <li data-md>
       <p>Return <var>result</var>.</p>
     </ol>
     <p>The current matrix is not modified.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export data-lt="rotate(rotX, rotY, rotZ)|rotate(rotX, rotY)|rotate(rotX)|rotate()" id="dom-dommatrixreadonly-rotate"><code>rotate(<var>rotX</var>, <var>rotY</var>, <var>rotZ</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Let <var>result</var> be the resulting matrix initialized to the values of the current
matrix.</p>
      <li data-md>
       <p>Perform a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-rotateself" id="ref-for-dom-dommatrix-rotateself①">rotateSelf()</a></code> transformation on <var>result</var> with the
arguments <var>rotX</var>, <var>rotY</var>, <var>rotZ</var>.</p>
      <li data-md>
       <p>Return <var>result</var>.</p>
     </ol>
     <p>The current matrix is not modified.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export data-lt="rotateFromVector(x, y)|rotateFromVector(x)|rotateFromVector()" id="dom-dommatrixreadonly-rotatefromvector"><code>rotateFromVector(<var>x</var>, <var>y</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Let <var>result</var> be the resulting matrix initialized to the values of the current
matrix.</p>
      <li data-md>
       <p>Perform a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-rotatefromvectorself" id="ref-for-dom-dommatrix-rotatefromvectorself①">rotateFromVectorSelf()</a></code> transformation on <var>result</var> with
the arguments <var>x</var>, <var>y</var>.</p>
      <li data-md>
       <p>Return <var>result</var>.</p>
     </ol>
     <p>The current matrix is not modified.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export data-lt="rotateAxisAngle(x, y, z, angle)|rotateAxisAngle(x, y, z)|rotateAxisAngle(x, y)|rotateAxisAngle(x)|rotateAxisAngle()" id="dom-dommatrixreadonly-rotateaxisangle"><code>rotateAxisAngle(<var>x</var>, <var>y</var>, <var>z</var>, <var>angle</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Let <var>result</var> be the resulting matrix initialized to the values of the current
matrix.</p>
      <li data-md>
       <p>Perform a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-rotateaxisangleself" id="ref-for-dom-dommatrix-rotateaxisangleself①">rotateAxisAngleSelf()</a></code> transformation on <var>result</var> with the
arguments <var>x</var>, <var>y</var>, <var>z</var>, <var>angle</var>.</p>
      <li data-md>
       <p>Return <var>result</var>.</p>
     </ol>
     <p>The current matrix is not modified.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export data-lt="skewX(sx)|skewX()" id="dom-dommatrixreadonly-skewx"><code>skewX(<var>sx</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Let <var>result</var> be the resulting matrix initialized to the values of the current
matrix.</p>
      <li data-md>
       <p>Perform a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-skewxself" id="ref-for-dom-dommatrix-skewxself①">skewXSelf()</a></code> transformation on <var>result</var> with the argument <var>sx</var>.</p>
      <li data-md>
       <p>Return <var>result</var>.</p>
     </ol>
     <p>The current matrix is not modified.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export data-lt="skewY(sy)|skewY()" id="dom-dommatrixreadonly-skewy"><code>skewY(<var>sy</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Let <var>result</var> be the resulting matrix initialized to the values of the current
matrix.</p>
      <li data-md>
       <p>Perform a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-skewyself" id="ref-for-dom-dommatrix-skewyself①">skewYSelf()</a></code> transformation on <var>result</var> with the argument <var>sy</var>.</p>
      <li data-md>
       <p>Return <var>result</var>.</p>
     </ol>
     <p>The current matrix is not modified.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export data-lt="multiply(other)|multiply()" id="dom-dommatrixreadonly-multiply"><code>multiply(<var>other</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Let <var>result</var> be the resulting matrix initialized to the values of the current
matrix.</p>
      <li data-md>
       <p>Perform a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-multiplyself" id="ref-for-dom-dommatrix-multiplyself①">multiplySelf()</a></code> transformation on <var>result</var> with the
argument <var>other</var>.</p>
      <li data-md>
       <p>Return <var>result</var>.</p>
     </ol>
     <p>The current matrix is not modified.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export id="dom-dommatrixreadonly-flipx"><code>flipX()</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Let <var>result</var> be the resulting matrix initialized to the values of the current
matrix.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="#post-multiply" id="ref-for-post-multiply②">Post-multiply</a> <var>result</var> with <code>new DOMMatrix([-1, 0, 0, 1, 0,
0])</code>.</p>
      <li data-md>
       <p>Return <var>result</var>.</p>
     </ol>
     <p>The current matrix is not modified.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export id="dom-dommatrixreadonly-flipy"><code>flipY()</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Let <var>result</var> be the resulting matrix initialized to the values of the current
matrix.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="#post-multiply" id="ref-for-post-multiply③">Post-multiply</a> <var>result</var> with <code>new DOMMatrix([1, 0, 0, -1, 0,
0])</code>.</p>
      <li data-md>
       <p>Return <var>result</var>.</p>
     </ol>
     <p>The current matrix is not modified.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export id="dom-dommatrixreadonly-inverse"><code>inverse()</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Let <var>result</var> be the resulting matrix initialized to the values of the current
matrix.</p>
      <li data-md>
       <p>Perform a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-invertself" id="ref-for-dom-dommatrix-invertself①">invertSelf()</a></code> transformation on <var>result</var>.</p>
      <li data-md>
       <p>Return <var>result</var>.</p>
     </ol>
     <p>The current matrix is not modified.</p>
   </dl>
   <p>The following methods do not modify the current matrix.</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export data-lt="transformPoint(point)|transformPoint()" id="dom-dommatrixreadonly-transformpoint"><code>transformPoint(<var>point</var>)</code></dfn>
    <dd data-md>
     <p>Let <var>pointObject</var> be the result of invoking <a data-link-type="dfn" href="#create-a-dompoint-from-the-dictionary" id="ref-for-create-a-dompoint-from-the-dictionary⑤">create a <code>DOMPoint</code> from the
dictionary</a> <var>point</var>. Return the result of invoking <a data-link-type="dfn" href="#transform-a-point-with-a-matrix" id="ref-for-transform-a-point-with-a-matrix①">transform a point with a
matrix</a>, given <var>pointObject</var> and the current matrix. The passed argument does not get
modified.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export id="dom-dommatrixreadonly-tofloat32array"><code>toFloat32Array()</code></dfn>
    <dd data-md>
     <p>Returns the serialized 16 elements <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m11" id="ref-for-dom-dommatrixreadonly-m11⑤">m11</a></code> to <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m44" id="ref-for-dom-dommatrixreadonly-m44④">m44</a></code> of
the current matrix in column-major order as <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array③">Float32Array</a></code>.</p>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="method" data-export id="dom-dommatrixreadonly-tofloat64array"><code>toFloat64Array()</code></dfn>
    <dd data-md>
     <p>Returns the serialized 16 elements <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m11" id="ref-for-dom-dommatrixreadonly-m11⑥">m11</a></code> to <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m44" id="ref-for-dom-dommatrixreadonly-m44⑤">m44</a></code> of
the current matrix in column-major order as <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-Float64Array" id="ref-for-idl-Float64Array③">Float64Array</a></code>.</p>
    <dt data-md><dfn class="dfn-paneled" data-dfn-for="DOMMatrixReadOnly" data-dfn-type="dfn" data-lt="stringificationbehavior" data-noexport id="dommatrixreadonly-stringification-behavior">stringification behavior</dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>If one or more of <a data-link-type="dfn" href="#matrix-m11-element" id="ref-for-matrix-m11-element⑤">m11 element</a> through <a data-link-type="dfn" href="#matrix-m44-element" id="ref-for-matrix-m44-element⑤">m44 element</a> are a
non-finite value, then throw an "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①">DOMException</a></code>.</p>
       <p class="note" role="note"><span>Note:</span> The CSS syntax cannot represent <span class="css">NaN</span> or <span class="css">Infinity</span> values.</p>
      <li data-md>
       <p>Let <var>string</var> be the empty string.</p>
      <li data-md>
       <p>If <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d①⑦">is 2D</a> is <code>true</code>, then:</p>
       <ol>
        <li data-md>
         <p>Append "<code>matrix(</code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring">ToString</a>(<a data-link-type="dfn" href="#matrix-m11-element" id="ref-for-matrix-m11-element⑥">m11 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions①">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring①">ToString</a>(<a data-link-type="dfn" href="#matrix-m12-element" id="ref-for-matrix-m12-element④">m12 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions②">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring②">ToString</a>(<a data-link-type="dfn" href="#matrix-m21-element" id="ref-for-matrix-m21-element④">m21 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions③">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring③">ToString</a>(<a data-link-type="dfn" href="#matrix-m22-element" id="ref-for-matrix-m22-element④">m22 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions④">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring④">ToString</a>(<a data-link-type="dfn" href="#matrix-m41-element" id="ref-for-matrix-m41-element④">m41 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions⑤">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring⑤">ToString</a>(<a data-link-type="dfn" href="#matrix-m42-element" id="ref-for-matrix-m42-element④">m42 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>)</code>" to <var>string</var>.</p>
       </ol>
       <p class="note" role="note"><span>Note:</span> The string will be in the form of a a CSS Transforms <a class="production css" data-link-type="function" href="https://drafts.csswg.org/css-transforms-1/#funcdef-transform-matrix" id="ref-for-funcdef-transform-matrix">&lt;matrix()></a> function. <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
      <li data-md>
       <p>Otherwise:</p>
       <ol>
        <li data-md>
         <p>Append "<code>matrix3d(</code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions⑥">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring⑥">ToString</a>(<a data-link-type="dfn" href="#matrix-m11-element" id="ref-for-matrix-m11-element⑦">m11 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions⑦">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring⑦">ToString</a>(<a data-link-type="dfn" href="#matrix-m12-element" id="ref-for-matrix-m12-element⑤">m12 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions⑧">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring⑧">ToString</a>(<a data-link-type="dfn" href="#matrix-m13-element" id="ref-for-matrix-m13-element④">m13 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions⑨">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring⑨">ToString</a>(<a data-link-type="dfn" href="#matrix-m14-element" id="ref-for-matrix-m14-element④">m14 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions①⓪">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring①⓪">ToString</a>(<a data-link-type="dfn" href="#matrix-m21-element" id="ref-for-matrix-m21-element⑤">m21 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions①①">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring①①">ToString</a>(<a data-link-type="dfn" href="#matrix-m22-element" id="ref-for-matrix-m22-element⑤">m22 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions①②">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring①②">ToString</a>(<a data-link-type="dfn" href="#matrix-m23-element" id="ref-for-matrix-m23-element④">m23 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions①③">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring①③">ToString</a>(<a data-link-type="dfn" href="#matrix-m24-element" id="ref-for-matrix-m24-element④">m24 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions①④">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring①④">ToString</a>(<a data-link-type="dfn" href="#matrix-m41-element" id="ref-for-matrix-m41-element⑤">m41 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions①⑤">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring①⑤">ToString</a>(<a data-link-type="dfn" href="#matrix-m42-element" id="ref-for-matrix-m42-element⑤">m42 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions①⑥">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring①⑥">ToString</a>(<a data-link-type="dfn" href="#matrix-m43-element" id="ref-for-matrix-m43-element④">m43 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>, </code>" to <var>string</var>.</p>
        <li data-md>
         <p>Append <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-algorithm-conventions" id="ref-for-sec-algorithm-conventions①⑦">!</a> <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring①⑦">ToString</a>(<a data-link-type="dfn" href="#matrix-m44-element" id="ref-for-matrix-m44-element⑥">m44 element</a>) to <var>string</var>.</p>
        <li data-md>
         <p>Append "<code>)</code>" to <var>string</var>.</p>
       </ol>
       <p class="note" role="note"><span>Note:</span> The string will be in the form of a a CSS Transforms <a class="production css" data-link-type="function" href="https://drafts.csswg.org/css-transforms-2/#funcdef-matrix3d" id="ref-for-funcdef-matrix3d">&lt;matrix3d()></a> function. <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
      <li data-md>
       <p>Return <var>string</var>.</p>
     </ol>
   </dl>
   <div class="example" id="example-c07c5bc8">
    <a class="self-link" href="#example-c07c5bc8"></a> In this example, a matrix is created and several 2D transformation methods are called: 
<pre><code class="highlight"><c- a>var</c-> matrix <c- o>=</c-> <c- k>new</c-> DOMMatrix<c- p>();</c->
matrix<c- p>.</c->scaleSelf<c- p>(</c-><c- mi>2</c-><c- p>);</c->
matrix<c- p>.</c->translateSelf<c- p>(</c-><c- mi>20</c-><c- p>,</c-><c- mi>20</c-><c- p>);</c->
console<c- p>.</c->assert<c- p>(</c->matrix<c- p>.</c->toString<c- p>()</c-> <c- o>===</c->
                <c- u>"matrix(2, 0, 0, 2, 40, 40)"</c-><c- p>);</c->
</code></pre>
   </div>
   <div class="example" id="example-92755fec">
    <a class="self-link" href="#example-92755fec"></a> In the following example, a matrix is created and several 3D transformation methods are called: 
<pre><code class="highlight"><c- a>var</c-> matrix <c- o>=</c-> <c- k>new</c-> DOMMatrix<c- p>();</c->
matrix<c- p>.</c->scale3dSelf<c- p>(</c-><c- mi>2</c-><c- p>);</c->
console<c- p>.</c->assert<c- p>(</c->matrix<c- p>.</c->toString<c- p>()</c-> <c- o>===</c->
                <c- u>"matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)"</c-><c- p>);</c->
</code></pre>
    <p>For 3D operations, the stringifier returns a string representing a 3D matrix.</p>
   </div>
   <div class="example" id="example-733d794b">
    <a class="self-link" href="#example-733d794b"></a> This example will throw an exception because there are non-finite values in the matrix. 
<pre><code class="highlight"><c- a>var</c-> matrix <c- o>=</c-> <c- k>new</c-> DOMMatrix<c- p>([</c-><c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>]);</c->
<c- a>var</c-> string <c- o>=</c-> matrix <c- o>+</c-> <c- u>" Batman!"</c-><c- p>;</c->
</code></pre>
   </div>
   <h3 class="heading settled" data-level="6.6" id="mutable-transformation-methods"><span class="secno">6.6. </span><span class="content">Mutable transformation methods</span><a class="self-link" href="#mutable-transformation-methods"></a></h3>
   <p>The following methods modify the current matrix, so that each method returns the matrix where it
was invoked on. The primary benefit of this is allowing content creators to chain method calls.</p>
   <div class="example" id="example-15e8ec9d">
    <a class="self-link" href="#example-15e8ec9d"></a> The following code example: 
<pre><code class="highlight"><c- a>var</c-> matrix <c- o>=</c-> <c- k>new</c-> DOMMatrix<c- p>();</c->
matrix<c- p>.</c->translateSelf<c- p>(</c-><c- mi>20</c-><c- p>,</c-> <c- mi>20</c-><c- p>);</c->
matrix<c- p>.</c->scaleSelf<c- p>(</c-><c- mi>2</c-><c- p>);</c->
matrix<c- p>.</c->translateSelf<c- p>(</c-><c- o>-</c-><c- mi>20</c-><c- p>,</c-> <c- o>-</c-><c- mi>20</c-><c- p>);</c->
</code></pre>
    <p>is equivalent to:</p>
<pre><code class="highlight"><c- a>var</c-> matrix <c- o>=</c-> <c- k>new</c-> DOMMatrix<c- p>();</c->
matrix<c- p>.</c->translateSelf<c- p>(</c-><c- mi>20</c-><c- p>,</c-> <c- mi>20</c-><c- p>).</c->scaleSelf<c- p>(</c-><c- mi>2</c-><c- p>).</c->translateSelf<c- p>(</c-><c- o>-</c-><c- mi>20</c-><c- p>,</c-> <c- o>-</c-><c- mi>20</c-><c- p>);</c->
</code></pre>
   </div>
   <p class="note" role="note"><span>Note:</span> Authors who use chained method calls are advised to use mutable transformation methods
to avoid unnecessary memory allocations due to creation of intermediate <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑥⑦">DOMMatrix</a></code> objects in
user agents.</p>
   <dl>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export data-lt="multiplySelf(other)|multiplySelf()" id="dom-dommatrix-multiplyself"><code>multiplySelf(<var>other</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Let <var>otherObject</var> be the result of invoking <a data-link-type="dfn" href="#create-a-dommatrix-from-the-dictionary" id="ref-for-create-a-dommatrix-from-the-dictionary②">create a <code>DOMMatrix</code> from the dictionary</a> <var>other</var>.</p>
      <li data-md>
       <p>The <var>otherObject</var> matrix gets post-multiplied to the current matrix.</p>
      <li data-md>
       <p>If <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d①⑧">is 2D</a> of <var>otherObject</var> is <code>false</code>, set <span id="ref-for-matrix-is-2d①⑨">is 2D</span> of the current matrix to <code>false</code>.</p>
      <li data-md>
       <p>Return the current matrix.</p>
     </ol>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export data-lt="preMultiplySelf(other)|preMultiplySelf()" id="dom-dommatrix-premultiplyself"><code>preMultiplySelf(<var>other</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Let <var>otherObject</var> be the result of invoking <a data-link-type="dfn" href="#create-a-dommatrix-from-the-dictionary" id="ref-for-create-a-dommatrix-from-the-dictionary③">create a <code>DOMMatrix</code> from the dictionary</a> <var>other</var>.</p>
      <li data-md>
       <p>The <var>otherObject</var> matrix gets pre-multiplied to the current matrix.</p>
      <li data-md>
       <p>If <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d②⓪">is 2D</a> of <var>otherObject</var> is <code>false</code>, set <span id="ref-for-matrix-is-2d②①">is 2D</span> of the current matrix to <code>false</code>.</p>
      <li data-md>
       <p>Return the current matrix.</p>
     </ol>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export data-lt="translateSelf(tx, ty, tz)|translateSelf(tx, ty)|translateSelf(tx)|translateSelf()" id="dom-dommatrix-translateself"><code>translateSelf(<var>tx</var>, <var>ty</var>, <var>tz</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p><a data-link-type="dfn" href="#post-multiply" id="ref-for-post-multiply④">Post-multiply</a> a translation transformation on the current matrix. The 3D
translation matrix is <a href="https://drafts.csswg.org/css-transforms-1/#TranslateDefined">described</a> in CSS
Transforms. <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
      <li data-md>
       <p>If <var>tz</var> is specified and not <span class="css">0</span> or <span class="css">-0</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d②②">is 2D</a> of the
current matrix to <code>false</code>.</p>
      <li data-md>
       <p>Return the current matrix.</p>
     </ol>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export data-lt="scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ)|scaleSelf(scaleX, scaleY, scaleZ, originX, originY)|scaleSelf(scaleX, scaleY, scaleZ, originX)|scaleSelf(scaleX, scaleY, scaleZ)|scaleSelf(scaleX, scaleY)|scaleSelf(scaleX)|scaleSelf()" id="dom-dommatrix-scaleself"><code>scaleSelf(<var>scaleX</var>, <var>scaleY</var>, <var>scaleZ</var>, <var>originX</var>, <var>originY</var>, <var>originZ</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Perform a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-translateself" id="ref-for-dom-dommatrix-translateself②">translateSelf()</a></code> transformation on the current matrix with the
arguments <var>originX</var>, <var>originY</var>, <var>originZ</var>.</p>
      <li data-md>
       <p>If <var>scaleY</var> is missing, set <var>scaleY</var> to the value of <var>scaleX</var>.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="#post-multiply" id="ref-for-post-multiply⑤">Post-multiply</a> a non-uniform scale transformation on the current matrix. The 3D
scale matrix is <a href="https://drafts.csswg.org/css-transforms-1/#ScaleDefined">described</a> in CSS Transforms with <var>sx</var> = <var>scaleX</var>, <var>sy</var> = <var>scaleY</var> and <var>sz</var> = <var>scaleZ</var>. <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
      <li data-md>
       <p>Negate <var>originX</var>, <var>originY</var> and <var>originZ</var>.</p>
      <li data-md>
       <p>Perform a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-translateself" id="ref-for-dom-dommatrix-translateself③">translateSelf()</a></code> transformation on the current matrix with the
arguments <var>originX</var>, <var>originY</var>, <var>originZ</var>.</p>
      <li data-md>
       <p>If <var>scaleZ</var> is not <span class="css">1</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d②③">is 2D</a> of the current matrix to <code>false</code>.</p>
      <li data-md>
       <p>Return the current matrix.</p>
     </ol>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export data-lt="scale3dSelf(scale, originX, originY, originZ)|scale3dSelf(scale, originX, originY)|scale3dSelf(scale, originX)|scale3dSelf(scale)|scale3dSelf()" id="dom-dommatrix-scale3dself"><code>scale3dSelf(<var>scale</var>, <var>originX</var>, <var>originY</var>, <var>originZ</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Apply a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-translateself" id="ref-for-dom-dommatrix-translateself④">translateSelf()</a></code> transformation to the current matrix with the
arguments <var>originX</var>, <var>originY</var>, <var>originZ</var>.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="#post-multiply" id="ref-for-post-multiply⑥">Post-multiply</a> a uniform 3D scale transformation (<code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m11" id="ref-for-dom-dommatrixreadonly-m11⑦">m11</a></code> = <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m22" id="ref-for-dom-dommatrixreadonly-m22④">m22</a></code> = <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-m33" id="ref-for-dom-dommatrixreadonly-m33③">m33</a></code> = <var>scale</var>) on the current matrix.
The 3D scale matrix is <a href="https://drafts.csswg.org/css-transforms-1/#ScaleDefined">described</a> in CSS Transforms
with <var>sx</var> = <var>sy</var> = <var>sz</var> = <var>scale</var>. <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
      <li data-md>
       <p>Apply a <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-translateself" id="ref-for-dom-dommatrix-translateself⑤">translateSelf()</a></code> transformation to the current matrix with the
arguments -<var>originX</var>, -<var>originY</var>, -<var>originZ</var>.</p>
      <li data-md>
       <p>If <var>scale</var> is not <span class="css">1</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d②④">is 2D</a> of the current matrix to <code>false</code>.</p>
      <li data-md>
       <p>Return the current matrix.</p>
     </ol>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export data-lt="rotateSelf(rotX, rotY, rotZ)|rotateSelf(rotX, rotY)|rotateSelf(rotX)|rotateSelf()" id="dom-dommatrix-rotateself"><code>rotateSelf(<var>rotX</var>, <var>rotY</var>, <var>rotZ</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>If <var>rotY</var> and <var>rotZ</var> are both missing, set <var>rotZ</var> to the value
of <var>rotX</var> and set <var>rotX</var> and <var>rotY</var> to <span class="css">0</span>.</p>
      <li data-md>
       <p>If <var>rotY</var> is still missing, set <var>rotY</var> to <span class="css">0</span>.</p>
      <li data-md>
       <p>If <var>rotZ</var> is still missing, set <var>rotZ</var> to <span class="css">0</span>.</p>
      <li data-md>
       <p>If <var>rotX</var> or <var>rotY</var> are not <span class="css">0</span> or <span class="css">-0</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d②⑤">is 2D</a> of the current matrix to <code>false</code>.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="#post-multiply" id="ref-for-post-multiply⑦">Post-multiply</a> a rotation transformation on the current matrix around the vector 0,
0, 1 by the specified rotation <var>rotZ</var> in degrees. The 3D rotation matrix is <a href="https://drafts.csswg.org/css-transforms-1/#RotateDefined">described</a> in CSS Transforms
with <var>alpha</var> = <var>rotZ</var> in degrees. <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
      <li data-md>
       <p><a data-link-type="dfn" href="#post-multiply" id="ref-for-post-multiply⑧">Post-multiply</a> a rotation transformation on the current matrix around the vector 0,
1, 0 by the specified rotation <var>rotY</var> in degrees. The 3D rotation matrix is <a href="https://drafts.csswg.org/css-transforms-1/#RotateDefined">described</a> in CSS Transforms
with <var>alpha</var> = <var>rotY</var> in degrees. <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
      <li data-md>
       <p><a data-link-type="dfn" href="#post-multiply" id="ref-for-post-multiply⑨">Post-multiply</a> a rotation transformation on the current matrix around the vector 1,
0, 0 by the specified rotation <var>rotX</var> in degrees. The 3D rotation matrix is <a href="https://drafts.csswg.org/css-transforms-1/#RotateDefined">described</a> in CSS Transforms
with <var>alpha</var> = <var>rotX</var> in degrees. <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
      <li data-md>
       <p>Return the current matrix.</p>
     </ol>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export data-lt="rotateFromVectorSelf(x, y)|rotateFromVectorSelf(x)|rotateFromVectorSelf()" id="dom-dommatrix-rotatefromvectorself"><code>rotateFromVectorSelf(<var>x</var>, <var>y</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p><a data-link-type="dfn" href="#post-multiply" id="ref-for-post-multiply①⓪">Post-multiply</a> a rotation transformation on the current matrix. The rotation angle
is determined by the angle between the vector (1,0)<sup>T</sup> and
(<var>x</var>,<var>y</var>)<sup>T</sup> in the clockwise direction. If <var>x</var> and <var>y</var> should both be <span class="css">0</span> or <span class="css">-0</span>, the angle is specified as <span class="css">0</span>. The 2D rotation
matrix is <a href="https://drafts.csswg.org/css-transforms-1/#RotateDefined">described</a> in CSS
Transforms where <code>alpha</code> is the angle between the vector (1,0)<sup>T</sup> and
(<var>x</var>,<var>y</var>)<sup>T</sup> in degrees. <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
      <li data-md>
       <p>Return the current matrix.</p>
     </ol>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export data-lt="rotateAxisAngleSelf(x, y, z, angle)|rotateAxisAngleSelf(x, y, z)|rotateAxisAngleSelf(x, y)|rotateAxisAngleSelf(x)|rotateAxisAngleSelf()" id="dom-dommatrix-rotateaxisangleself"><code>rotateAxisAngleSelf(<var>x</var>, <var>y</var>, <var>z</var>, <var>angle</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p><a data-link-type="dfn" href="#post-multiply" id="ref-for-post-multiply①①">Post-multiply</a> a rotation transformation on the current matrix around the specified
vector <var>x</var>, <var>y</var>, <var>z</var> by the specified rotation <var>angle</var> in
degrees. The 3D rotation matrix is <a href="https://drafts.csswg.org/css-transforms-1/#RotateDefined">described</a> in CSS Transforms
with <var>alpha</var> = <var>angle</var> in degrees. <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
      <li data-md>
       <p>If <var>x</var> or <var>y</var> are not <span class="css">0</span> or <span class="css">-0</span>, set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d②⑥">is 2D</a> of
the current matrix to <code>false</code>.</p>
      <li data-md>
       <p>Return the current matrix.</p>
     </ol>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export data-lt="skewXSelf(sx)|skewXSelf()" id="dom-dommatrix-skewxself"><code>skewXSelf(<var>sx</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p><a data-link-type="dfn" href="#post-multiply" id="ref-for-post-multiply①②">Post-multiply</a> a skewX transformation on the current matrix by the specified angle <var>sx</var> in degrees. The 2D skewX matrix is <a href="https://drafts.csswg.org/css-transforms-1/#SkewXDefined">described</a> in CSS Transforms
with <var>alpha</var> = <var>sx</var> in degrees. <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
      <li data-md>
       <p>Return the current matrix.</p>
     </ol>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export data-lt="skewYSelf(sy)|skewYSelf()" id="dom-dommatrix-skewyself"><code>skewYSelf(<var>sy</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p><a data-link-type="dfn" href="#post-multiply" id="ref-for-post-multiply①③">Post-multiply</a> a skewX transformation on the current matrix by the specified angle <var>sy</var> in degrees. The 2D skewY matrix is <a href="https://drafts.csswg.org/css-transforms-1/#SkewYDefined">described</a> in CSS Transforms
with <var>beta</var> = <var>sy</var> in degrees. <a data-link-type="biblio" href="#biblio-css3-transforms">[CSS3-TRANSFORMS]</a></p>
      <li data-md>
       <p>Return the current matrix.</p>
     </ol>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export id="dom-dommatrix-invertself"><code>invertSelf()</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p>Invert the current matrix.</p>
      <li data-md>
       <p>If the current matrix is not invertible set all attributes to <span class="css">NaN</span> and set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d②⑦">is 2D</a> to <code>false</code>.</p>
      <li data-md>
       <p>Return the current matrix.</p>
     </ol>
    <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="DOMMatrix" data-dfn-type="method" data-export id="dom-dommatrix-setmatrixvalue"><code>setMatrixValue(<var>transformList</var>)</code></dfn>
    <dd data-md>
     <ol>
      <li data-md>
       <p><a data-link-type="dfn" href="#parse-a-string-into-an-abstract-matrix" id="ref-for-parse-a-string-into-an-abstract-matrix①">Parse <var>transformList</var> into an
abstract matrix</a>, and let <var>matrix</var> and <var>2dTransform</var> be the result. If the
result is failure, then throw a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#syntaxerror" id="ref-for-syntaxerror①">SyntaxError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException②">DOMException</a></code>.</p>
      <li data-md>
       <p>Set <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d②⑧">is 2D</a> to the value of <var>2dTransform</var>.</p>
      <li data-md>
       <p>Set <a data-link-type="dfn" href="#matrix-m11-element" id="ref-for-matrix-m11-element⑧">m11 element</a> through <a data-link-type="dfn" href="#matrix-m44-element" id="ref-for-matrix-m44-element⑦">m44 element</a> to the element
values of <var>matrix</var> in column-major order.</p>
      <li data-md>
       <p>Return the current matrix.</p>
     </ol>
   </dl>
   <h2 class="heading settled" data-level="7" id="structured-serialization"><span class="secno">7. </span><span class="content">Structured serialization</span><span id="cloning"></span><a class="self-link" href="#structured-serialization"></a></h2>
   <p><code class="idl"><a data-link-type="idl" href="#dompointreadonly" id="ref-for-dompointreadonly⑨">DOMPointReadOnly</a></code>, <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint③②">DOMPoint</a></code>, <code class="idl"><a data-link-type="idl" href="#domrectreadonly" id="ref-for-domrectreadonly⑨">DOMRectReadOnly</a></code>, <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect①⑤">DOMRect</a></code>, <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad①⑥">DOMQuad</a></code>, <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly②⑧">DOMMatrixReadOnly</a></code>, and <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑥⑧">DOMMatrix</a></code> objects are <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable-objects" id="ref-for-serializable-objects">serializable objects</a>. <a data-link-type="biblio" href="#biblio-html">[HTML]</a></p>
   <p>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#serialization-steps" id="ref-for-serialization-steps">serialization steps</a> for <code class="idl"><a data-link-type="idl" href="#dompointreadonly" id="ref-for-dompointreadonly①⓪">DOMPointReadOnly</a></code> and <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint③③">DOMPoint</a></code>, given <var>value</var> and <var>serialized</var>, are:</p>
   <ol>
    <li data-md>
     <p>Set <var>serialized</var>.[[X]] to <var>value</var>’s <a data-link-type="dfn" href="#point-x-coordinate" id="ref-for-point-x-coordinate②⓪">x coordinate</a>.</p>
    <li data-md>
     <p>Set <var>serialized</var>.[[Y]] to <var>value</var>’s <a data-link-type="dfn" href="#point-y-coordinate" id="ref-for-point-y-coordinate②⓪">y coordinate</a>.</p>
    <li data-md>
     <p>Set <var>serialized</var>.[[Z]] to <var>value</var>’s <a data-link-type="dfn" href="#point-z-coordinate" id="ref-for-point-z-coordinate①①">z coordinate</a>.</p>
    <li data-md>
     <p>Set <var>serialized</var>.[[W]] to <var>value</var>’s <a data-link-type="dfn" href="#point-w-perspective" id="ref-for-point-w-perspective①①">w perspective</a>.</p>
   </ol>
   <p>Their <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#deserialization-steps" id="ref-for-deserialization-steps">deserialization steps</a>, given <var>serialized</var> and <var>value</var>, are:</p>
   <ol>
    <li data-md>
     <p>Set <var>value</var>’s <a data-link-type="dfn" href="#point-x-coordinate" id="ref-for-point-x-coordinate②①">x coordinate</a> to <var>serialized</var>.[[X]].</p>
    <li data-md>
     <p>Set <var>value</var>’s <a data-link-type="dfn" href="#point-y-coordinate" id="ref-for-point-y-coordinate②①">y coordinate</a> to <var>serialized</var>.[[Y]].</p>
    <li data-md>
     <p>Set <var>value</var>’s <a data-link-type="dfn" href="#point-z-coordinate" id="ref-for-point-z-coordinate①②">z coordinate</a> to <var>serialized</var>.[[Z]].</p>
    <li data-md>
     <p>Set <var>value</var>’s <a data-link-type="dfn" href="#point-w-perspective" id="ref-for-point-w-perspective①②">w perspective</a> to <var>serialized</var>.[[W]].</p>
   </ol>
   <p>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#serialization-steps" id="ref-for-serialization-steps①">serialization steps</a> for <code class="idl"><a data-link-type="idl" href="#domrectreadonly" id="ref-for-domrectreadonly①⓪">DOMRectReadOnly</a></code> and <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect①⑥">DOMRect</a></code>, given <var>value</var> and <var>serialized</var>, are:</p>
   <ol>
    <li data-md>
     <p>Set <var>serialized</var>.[[X]] to <var>value</var>’s <a data-link-type="dfn" href="#rectangle-x-coordinate" id="ref-for-rectangle-x-coordinate①⓪">x coordinate</a>.</p>
    <li data-md>
     <p>Set <var>serialized</var>.[[Y]] to <var>value</var>’s <a data-link-type="dfn" href="#rectangle-y-coordinate" id="ref-for-rectangle-y-coordinate①⓪">y coordinate</a>.</p>
    <li data-md>
     <p>Set <var>serialized</var>.[[Width]] to <var>value</var>’s <a data-link-type="dfn" href="#rectangle-width-dimension" id="ref-for-rectangle-width-dimension⑨">width dimension</a>.</p>
    <li data-md>
     <p>Set <var>serialized</var>.[[Height]] to <var>value</var>’s <a data-link-type="dfn" href="#rectangle-height-dimension" id="ref-for-rectangle-height-dimension⑨">height dimension</a>.</p>
   </ol>
   <p>Their <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#deserialization-steps" id="ref-for-deserialization-steps①">deserialization steps</a>, given <var>serialized</var> and <var>value</var>, are:</p>
   <ol>
    <li data-md>
     <p>Set <var>value</var>’s <a data-link-type="dfn" href="#rectangle-x-coordinate" id="ref-for-rectangle-x-coordinate①①">x coordinate</a> to <var>serialized</var>.[[X]].</p>
    <li data-md>
     <p>Set <var>value</var>’s <a data-link-type="dfn" href="#rectangle-y-coordinate" id="ref-for-rectangle-y-coordinate①①">y coordinate</a> to <var>serialized</var>.[[Y]].</p>
    <li data-md>
     <p>Set <var>value</var>’s <a data-link-type="dfn" href="#rectangle-width-dimension" id="ref-for-rectangle-width-dimension①⓪">width dimension</a> to <var>serialized</var>.[[Width]].</p>
    <li data-md>
     <p>Set <var>value</var>’s <a data-link-type="dfn" href="#rectangle-height-dimension" id="ref-for-rectangle-height-dimension①⓪">height dimension</a> to <var>serialized</var>.[[Height]].</p>
   </ol>
   <p>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#serialization-steps" id="ref-for-serialization-steps②">serialization steps</a> for <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad①⑦">DOMQuad</a></code>, given <var>value</var> and <var>serialized</var>, are:</p>
   <ol>
    <li data-md>
     <p>Set <var>serialized</var>.[[P1]] to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#sub-serialization" id="ref-for-sub-serialization">sub-serialization</a> of <var>value</var>’s <a data-link-type="dfn" href="#quadrilateral-point-1" id="ref-for-quadrilateral-point-1⑧">point 1</a>.</p>
    <li data-md>
     <p>Set <var>serialized</var>.[[P2]] to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#sub-serialization" id="ref-for-sub-serialization①">sub-serialization</a> of <var>value</var>’s <a data-link-type="dfn" href="#quadrilateral-point-2" id="ref-for-quadrilateral-point-2⑧">point 2</a>.</p>
    <li data-md>
     <p>Set <var>serialized</var>.[[P3]] to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#sub-serialization" id="ref-for-sub-serialization②">sub-serialization</a> of <var>value</var>’s <a data-link-type="dfn" href="#quadrilateral-point-3" id="ref-for-quadrilateral-point-3⑧">point 3</a>.</p>
    <li data-md>
     <p>Set <var>serialized</var>.[[P4]] to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#sub-serialization" id="ref-for-sub-serialization③">sub-serialization</a> of <var>value</var>’s <a data-link-type="dfn" href="#quadrilateral-point-4" id="ref-for-quadrilateral-point-4⑧">point 4</a>.</p>
   </ol>
   <p>Their <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#deserialization-steps" id="ref-for-deserialization-steps②">deserialization steps</a>, given <var>serialized</var> and <var>value</var>, are:</p>
   <ol>
    <li data-md>
     <p>Set <var>value</var>’s <a data-link-type="dfn" href="#quadrilateral-point-1" id="ref-for-quadrilateral-point-1⑨">point 1</a> to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#sub-deserialization" id="ref-for-sub-deserialization">sub-deserialization</a> of <var>serialized</var>.[[P1]].</p>
    <li data-md>
     <p>Set <var>value</var>’s <a data-link-type="dfn" href="#quadrilateral-point-2" id="ref-for-quadrilateral-point-2⑨">point 2</a> to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#sub-deserialization" id="ref-for-sub-deserialization①">sub-deserialization</a> of <var>serialized</var>.[[P2]].</p>
    <li data-md>
     <p>Set <var>value</var>’s <a data-link-type="dfn" href="#quadrilateral-point-3" id="ref-for-quadrilateral-point-3⑨">point 3</a> to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#sub-deserialization" id="ref-for-sub-deserialization②">sub-deserialization</a> of <var>serialized</var>.[[P3]].</p>
    <li data-md>
     <p>Set <var>value</var>’s <a data-link-type="dfn" href="#quadrilateral-point-4" id="ref-for-quadrilateral-point-4⑨">point 4</a> to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#sub-deserialization" id="ref-for-sub-deserialization③">sub-deserialization</a> of <var>serialized</var>.[[P4]].</p>
   </ol>
   <p>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#serialization-steps" id="ref-for-serialization-steps③">serialization steps</a> for <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly②⑨">DOMMatrixReadOnly</a></code> and <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑥⑨">DOMMatrix</a></code>, given <var>value</var> and <var>serialized</var>, are:</p>
   <ol>
    <li data-md>
     <p>If <var>value</var>’s <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d②⑨">is 2D</a> is <code>true</code>:</p>
     <ol>
      <li data-md>
       <p>Set <var>serialized</var>.[[M11]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m11-element" id="ref-for-matrix-m11-element⑨">m11 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M12]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m12-element" id="ref-for-matrix-m12-element⑥">m12 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M21]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m21-element" id="ref-for-matrix-m21-element⑥">m21 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M22]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m22-element" id="ref-for-matrix-m22-element⑥">m22 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M41]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m41-element" id="ref-for-matrix-m41-element⑥">m41 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M42]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m42-element" id="ref-for-matrix-m42-element⑥">m42 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[Is2D]] to <code>true</code>.</p>
     </ol>
     <p class="note" role="note"><span>Note:</span> It is possible for a 2D <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑦⓪">DOMMatrix</a></code> or <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly③⓪">DOMMatrixReadOnly</a></code> to have <span class="css">-0</span> for
some of the other elements, e.g., the <a data-link-type="dfn" href="#matrix-m13-element" id="ref-for-matrix-m13-element⑤">m13 element</a>, which will not be
roundtripped by this algorithm.</p>
    <li data-md>
     <p>Otherwise:</p>
     <ol>
      <li data-md>
       <p>Set <var>serialized</var>.[[M11]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m11-element" id="ref-for-matrix-m11-element①⓪">m11 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M12]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m12-element" id="ref-for-matrix-m12-element⑦">m12 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M13]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m13-element" id="ref-for-matrix-m13-element⑥">m13 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M14]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m14-element" id="ref-for-matrix-m14-element⑤">m14 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M21]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m21-element" id="ref-for-matrix-m21-element⑦">m21 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M22]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m22-element" id="ref-for-matrix-m22-element⑦">m22 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M23]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m23-element" id="ref-for-matrix-m23-element⑤">m23 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M24]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m24-element" id="ref-for-matrix-m24-element⑤">m24 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M31]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m31-element" id="ref-for-matrix-m31-element④">m31 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M32]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m32-element" id="ref-for-matrix-m32-element④">m32 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M33]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m33-element" id="ref-for-matrix-m33-element④">m33 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M34]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m34-element" id="ref-for-matrix-m34-element④">m34 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M41]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m41-element" id="ref-for-matrix-m41-element⑦">m41 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M42]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m42-element" id="ref-for-matrix-m42-element⑦">m42 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M43]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m43-element" id="ref-for-matrix-m43-element⑤">m43 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[M44]] to <var>value</var>’s <a data-link-type="dfn" href="#matrix-m44-element" id="ref-for-matrix-m44-element⑧">m44 element</a>.</p>
      <li data-md>
       <p>Set <var>serialized</var>.[[Is2D]] to <code>false</code>.</p>
     </ol>
     <p>Their <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/structured-data.html#deserialization-steps" id="ref-for-deserialization-steps③">deserialization steps</a>, given <var>serialized</var> and <var>value</var>, are:</p>
     <ol>
      <li data-md>
       <p>If <var>serialized</var>.[[Is2D]] is <code>true</code>:</p>
       <ol>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m11-element" id="ref-for-matrix-m11-element①①">m11 element</a> to <var>serialized</var>.[[M11]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m12-element" id="ref-for-matrix-m12-element⑧">m12 element</a> to <var>serialized</var>.[[M12]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m13-element" id="ref-for-matrix-m13-element⑦">m13 element</a> to <span class="css">0</span>.</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m14-element" id="ref-for-matrix-m14-element⑥">m14 element</a> to <span class="css">0</span>.</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m21-element" id="ref-for-matrix-m21-element⑧">m21 element</a> to <var>serialized</var>.[[M21]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m22-element" id="ref-for-matrix-m22-element⑧">m22 element</a> to <var>serialized</var>.[[M22]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m23-element" id="ref-for-matrix-m23-element⑥">m23 element</a> to <span class="css">0</span>.</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m24-element" id="ref-for-matrix-m24-element⑥">m24 element</a> to <span class="css">0</span>.</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m31-element" id="ref-for-matrix-m31-element⑤">m31 element</a> to <span class="css">0</span>.</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m32-element" id="ref-for-matrix-m32-element⑤">m32 element</a> to <span class="css">0</span>.</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m33-element" id="ref-for-matrix-m33-element⑤">m33 element</a> to <span class="css">1</span>.</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m34-element" id="ref-for-matrix-m34-element⑤">m34 element</a> to <span class="css">0</span>.</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m41-element" id="ref-for-matrix-m41-element⑧">m41 element</a> to <var>serialized</var>.[[M41]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m42-element" id="ref-for-matrix-m42-element⑧">m42 element</a> to <var>serialized</var>.[[M42]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m43-element" id="ref-for-matrix-m43-element⑥">m43 element</a> to <span class="css">0</span>.</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m44-element" id="ref-for-matrix-m44-element⑨">m44 element</a> to <span class="css">1</span>.</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d③⓪">is 2D</a> to <code>true</code>.</p>
       </ol>
      <li data-md>
       <p>Otherwise:</p>
       <ol>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m11-element" id="ref-for-matrix-m11-element①②">m11 element</a> to <var>serialized</var>.[[M11]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m12-element" id="ref-for-matrix-m12-element⑨">m12 element</a> to <var>serialized</var>.[[M12]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m13-element" id="ref-for-matrix-m13-element⑧">m13 element</a> to <var>serialized</var>.[[M13]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m14-element" id="ref-for-matrix-m14-element⑦">m14 element</a> to <var>serialized</var>.[[M14]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m21-element" id="ref-for-matrix-m21-element⑨">m21 element</a> to <var>serialized</var>.[[M21]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m22-element" id="ref-for-matrix-m22-element⑨">m22 element</a> to <var>serialized</var>.[[M22]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m23-element" id="ref-for-matrix-m23-element⑦">m23 element</a> to <var>serialized</var>.[[M23]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m24-element" id="ref-for-matrix-m24-element⑦">m24 element</a> to <var>serialized</var>.[[M24]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m31-element" id="ref-for-matrix-m31-element⑥">m31 element</a> to <var>serialized</var>.[[M31]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m32-element" id="ref-for-matrix-m32-element⑥">m32 element</a> to <var>serialized</var>.[[M32]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m33-element" id="ref-for-matrix-m33-element⑥">m33 element</a> to <var>serialized</var>.[[M33]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m34-element" id="ref-for-matrix-m34-element⑥">m34 element</a> to <var>serialized</var>.[[M34]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m41-element" id="ref-for-matrix-m41-element⑨">m41 element</a> to <var>serialized</var>.[[M41]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m42-element" id="ref-for-matrix-m42-element⑨">m42 element</a> to <var>serialized</var>.[[M42]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m43-element" id="ref-for-matrix-m43-element⑦">m43 element</a> to <var>serialized</var>.[[M43]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-m44-element" id="ref-for-matrix-m44-element①⓪">m44 element</a> to <var>serialized</var>.[[M44]].</p>
        <li data-md>
         <p>Set <var>value</var>’s <a data-link-type="dfn" href="#matrix-is-2d" id="ref-for-matrix-is-2d③①">is 2D</a> to <code>false</code>.</p>
       </ol>
     </ol>
   </ol>
   <h2 class="heading settled" data-level="8" id="priv-sec"><span class="secno">8. </span><span class="content">Privacy and Security Considerations</span><a class="self-link" href="#priv-sec"></a></h2>
   <p>The <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑦①">DOMMatrix</a></code> and <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly③①">DOMMatrixReadOnly</a></code> interfaces have entry-points to parsing a string with
CSS syntax. Therefore the <a href="https://drafts.csswg.org/css-syntax/#priv-sec">privacy and
security considerations</a> of the CSS Syntax specification applies. <a data-link-type="biblio" href="#biblio-css3-syntax">[CSS3-SYNTAX]</a></p>
   <div class="example" id="example-2f98d29f"><a class="self-link" href="#example-2f98d29f"></a> This could potentially be used to exploit bugs in the CSS parser in a user agent. </div>
   <p>There are no other known security or privacy impacts of the interfaces defined in this
specification. However, other specifications that have APIs that use the interfaces defined in this
specification could potentially introduce security or privacy issues.</p>
   <div class="example" id="example-8bb3622b"><a class="self-link" href="#example-8bb3622b"></a> For example, the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect">getBoundingClientRect()</a></code> API defined in CSSOM View returns a <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect①⑦">DOMRect</a></code> that could be used to measure the size of an inline element containing some text of a
particular font, which exposes information about whether the user has that font installed. That
information, if used to test many common fonts, can then be personally-identifiable information. <a data-link-type="biblio" href="#biblio-cssom-view">[CSSOM-VIEW]</a> </div>
   <h2 class="heading settled" data-level="9" id="historical"><span class="secno">9. </span><span class="content">Historical</span><a class="self-link" href="#historical"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>The interfaces in this specification are intended to replace earlier similar interfaces found in
various specifications as well as proprietary interfaces found in some user agents. This section
attempts to enumerate these interfaces.</p>
   <h3 class="heading settled" data-level="9.1" id="historical-cssom-view"><span class="secno">9.1. </span><span class="content">CSSOM View</span><a class="self-link" href="#historical-cssom-view"></a></h3>
   <p>Earlier revisions of CSSOM View defined a <code>ClientRect</code> interface, which is replaced by <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect①⑧">DOMRect</a></code>. Implementations conforming to this specification will not support <code>ClientRect</code>. <a data-link-type="biblio" href="#biblio-cssom-view">[CSSOM-VIEW]</a></p>
   <h3 class="heading settled" data-level="9.2" id="historical-svg"><span class="secno">9.2. </span><span class="content">SVG</span><a class="self-link" href="#historical-svg"></a></h3>
   <p>Earlier revisions of SVG defined <code class="idl"><a data-link-type="idl" href="#svgpoint" id="ref-for-svgpoint①">SVGPoint</a></code>, <code class="idl"><a data-link-type="idl" href="#svgrect" id="ref-for-svgrect①">SVGRect</a></code>, <code class="idl"><a data-link-type="idl" href="#svgmatrix" id="ref-for-svgmatrix②">SVGMatrix</a></code>, which are defined in
this specifications as aliases to <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint③④">DOMPoint</a></code>, <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect①⑨">DOMRect</a></code>, <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑦②">DOMMatrix</a></code>, respectively. <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a></p>
   <h3 class="heading settled" data-level="9.3" id="historical-non-standard"><span class="secno">9.3. </span><span class="content">Non-standard</span><a class="self-link" href="#historical-non-standard"></a></h3>
   <p>Some user agents supported a <code>WebKitPoint</code> interface. Implementations conforming to
this specification will not support <code>WebKitPoint</code>.</p>
   <p>Several user agents supported a <code class="idl"><a data-link-type="idl" href="#webkitcssmatrix" id="ref-for-webkitcssmatrix">WebKitCSSMatrix</a></code> interface, which is also widely used on the
Web. It is defined in this specification as an alias to <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑦③">DOMMatrix</a></code>.</p>
   <p>Some user agents supported a <code>MSCSSMatrix</code> interface. Implementations conforming to
this specification will not support <code>MSCSSMatrix</code>.</p>
   <h2 class="no-num heading settled" id="changes"><span class="content">Changes since last publication</span><a class="self-link" href="#changes"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>The following changes were made since the <a href="https://www.w3.org/TR/2014/CR-geometry-1-20141125/">25 November 2014 Candidate Recommendation</a>.</p>
   <ul>
    <li data-md>
     <p>Changed the interfaces to generally use specific static operations for construction instead
of using overloaded constructors, and made the interfaces more consistent. However, <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑦④">DOMMatrix</a></code> still uses an overloaded constructor for compatibility with <code class="idl"><a data-link-type="idl" href="#webkitcssmatrix" id="ref-for-webkitcssmatrix①">WebKitCSSMatrix</a></code>.</p>
    <li data-md>
     <p>Introduced the <code class="idl"><a data-link-type="idl" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit⑧">DOMMatrixInit</a></code> dictionary.</p>
    <li data-md>
     <p>Added JSON serializers for the interfaces.</p>
    <li data-md>
     <p>Changed <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly③②">DOMMatrixReadOnly</a></code> and <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑦⑤">DOMMatrix</a></code> to be compatible with <code class="idl"><a data-link-type="idl" href="#webkitcssmatrix" id="ref-for-webkitcssmatrix②">WebKitCSSMatrix</a></code>:</p>
     <ul>
      <li data-md>
       <p>Changed <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-rotate" id="ref-for-dom-dommatrixreadonly-rotate①">rotate()</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-rotateself" id="ref-for-dom-dommatrix-rotateself②">rotateSelf()</a></code> arguments from <code>(angle, originX, originY)</code> to <code>(rotX, rotY, rotZ)</code>.</p>
      <li data-md>
       <p>Changed the <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-scale" id="ref-for-dom-dommatrixreadonly-scale②">scale()</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-scaleself" id="ref-for-dom-dommatrix-scaleself③">scaleSelf()</a></code> methods to be more
like the previous <code>scaleNonUniform()</code>/<code>scaleNonUniformSelf()</code> methods,
and dropped the <code>scaleNonUniformSelf()</code> method. Keep support for <code>scaleNonUniform()</code> for legacy reasons.</p>
      <li data-md>
       <p>Made all arguments optional for <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑦⑥">DOMMatrix</a></code>/<code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly③③">DOMMatrixReadOnly</a></code> methods, except for <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-setmatrixvalue" id="ref-for-dom-dommatrix-setmatrixvalue②">setMatrixValue()</a></code>.</p>
      <li data-md>
       <p>Added no-argument constructor.</p>
      <li data-md>
       <p>Defined <code class="idl"><a data-link-type="idl" href="#webkitcssmatrix" id="ref-for-webkitcssmatrix③">WebKitCSSMatrix</a></code> to be a legacy window alias for <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑦⑦">DOMMatrix</a></code>.</p>
     </ul>
    <li data-md>
     <p>In workers, <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑦⑧">DOMMatrix</a></code> and <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly③④">DOMMatrixReadOnly</a></code> do not support parsing or stringifying with CSS syntax.</p>
    <li data-md>
     <p>Defined structured serialization of the interfaces.</p>
    <li data-md>
     <p>The live <code>bounds</code> attribute on <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad①⑧">DOMQuad</a></code> was replaced with a non-live <code class="idl"><a data-link-type="idl" href="#dom-domquad-getbounds" id="ref-for-dom-domquad-getbounds②">getBounds()</a></code> method. The "associated bounding rectangle" concept was also removed.</p>
    <li data-md>
     <p>Changed the string parser for <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑦⑨">DOMMatrix</a></code> and <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly③⑤">DOMMatrixReadOnly</a></code> to use CSS rules
instead of SVG rules.</p>
    <li data-md>
     <p>The stringifier for <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑧⓪">DOMMatrix</a></code> and <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly③⑥">DOMMatrixReadOnly</a></code> now throws if there are
non-finite values, and otherwise uses the <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-tostring" id="ref-for-sec-tostring①⑧">ToString</a> algorithm. <a data-link-type="biblio" href="#biblio-ecma-262">[ECMA-262]</a></p>
    <li data-md>
     <p>Made comparisons treat <span class="css">0</span> and <span class="css">-0</span> as equal throughout.</p>
    <li data-md>
     <p>Added <a href="#priv-sec">§ 8 Privacy and Security Considerations</a> and <a href="#historical">§ 9 Historical</a> sections.</p>
   </ul>
   <p>The following changes were made since the <a href="https://www.w3.org/TR/2014/WD-geometry-1-20140918/">18 September 2014 Working Draft</a>.</p>
   <ul>
    <li data-md>
     <p>Exposed <code class="idl"><a data-link-type="idl" href="#dompointreadonly" id="ref-for-dompointreadonly①①">DOMPointReadOnly</a></code>, <code class="idl"><a data-link-type="idl" href="#dompoint" id="ref-for-dompoint③⑤">DOMPoint</a></code>, <code class="idl"><a data-link-type="idl" href="#domrectreadonly" id="ref-for-domrectreadonly①①">DOMRectReadOnly</a></code>, <code class="idl"><a data-link-type="idl" href="#domrect" id="ref-for-domrect②⓪">DOMRect</a></code>, <code class="idl"><a data-link-type="idl" href="#domquad" id="ref-for-domquad①⑨">DOMQuad</a></code>, <code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly③⑦">DOMMatrixReadOnly</a></code> and <code class="idl"><a data-link-type="idl" href="#dommatrix" id="ref-for-dommatrix⑧①">DOMMatrix</a></code> to <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window①">Window</a></code> and <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/workers.html#worker" id="ref-for-worker">Worker</a></code>. Defined cloning of
the interface.</p>
   </ul>
   <p>The following changes were made since the <a href="https://www.w3.org/TR/2014/WD-geometry-1-20140626/">26 June 2014 Last Call Public Working
Draft</a>.</p>
   <ul>
    <li data-md>
     <p><code class="idl"><a data-link-type="idl" href="#dompointreadonly" id="ref-for-dompointreadonly①②">DOMPointReadOnly</a></code> got a constructor taking 4 arguments.</p>
    <li data-md>
     <p><code class="idl"><a data-link-type="idl" href="#domrectreadonly" id="ref-for-domrectreadonly①②">DOMRectReadOnly</a></code> got a constructor taking 4 arguments.</p>
    <li data-md>
     <p><code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly③⑧">DOMMatrixReadOnly</a></code> got a constructor taking a sequence of numbers as argument.</p>
    <li data-md>
     <p><code class="idl"><a data-link-type="idl" href="#domrectlist" id="ref-for-domrectlist③">DOMRectList</a></code> turned to an ArrayClass. The interfaces can just be used for legacy
interfaces.</p>
    <li data-md>
     <p>Put <code class="idl"><a data-link-type="idl" href="#domrectlist" id="ref-for-domrectlist④">DOMRectList</a></code> on at-Risk awaiting browser feedback.</p>
    <li data-md>
     <p>All interfaces are described in the sense of internal elements to describe the
read-only/writable and inheriting behavior.</p>
    <li data-md>
     <p>Replace <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#indexsizeerror" id="ref-for-indexsizeerror">IndexSizeError</a></code> exception with <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror⑥">TypeError</a></code>.</p>
   </ul>
   <p>The following changes were made since the <a href="https://www.w3.org/TR/2014/WD-geometry-1-20140522/">22 May 2014 First Public Working Draft</a>.</p>
   <ul>
    <li data-md>
     <p>Renamed mutable transformation methods *By to *Self. (E.g. <code>translateBy()</code> got
renamed to <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-translateself" id="ref-for-dom-dommatrix-translateself⑥">translateSelf()</a></code>.)</p>
    <li data-md>
     <p>Renamed <code>invert()</code> to <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-invertself" id="ref-for-dom-dommatrix-invertself②">invertSelf()</a></code>.</p>
    <li data-md>
     <p>Added <code class="idl"><a data-link-type="idl" href="#dom-dommatrix-setmatrixvalue" id="ref-for-dom-dommatrix-setmatrixvalue③">setMatrixValue()</a></code> which takes a transformation list as <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④">DOMString</a></code>.</p>
    <li data-md>
     <p><code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-is2d" id="ref-for-dom-dommatrixreadonly-is2d①">is2D</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-isidentity" id="ref-for-dom-dommatrixreadonly-isidentity①">isIdentity</a></code> are read-only attributes now.</p>
    <li data-md>
     <p><code class="idl"><a data-link-type="idl" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly③⑨">DOMMatrixReadOnly</a></code> gets flagged to track 3D transformation and attribute settings for <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-is2d" id="ref-for-dom-dommatrixreadonly-is2d②">is2D</a></code>.</p>
    <li data-md>
     <p><code class="idl"><a data-link-type="idl" href="#dom-dommatrix-invertself" id="ref-for-dom-dommatrix-invertself③">invertSelf()</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-dommatrixreadonly-inverse" id="ref-for-dom-dommatrixreadonly-inverse①">inverse()</a></code> do not throw exceptions anymore.</p>
   </ul>
   <h2 class="no-num heading settled" id="acknowledgments"><span class="content">Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>The editors would like to thank Robert O’Callahan for contributing to this specification.
Many thanks to Dean Jackson for his initial proposal of DOMMatrix.
Thanks to
Adenilson Cavalcanti,
Benoit Jacob,
Boris Zbarsky,
Brian Birtles,
Cameron McCormack,
Domenic Denicola,
Kari Pihkala,
Max Vujovic,
Mike Taylor,
Peter Hall,
Philip Jägenstedt,
Simon Fraser,
and
Timothy Loh
for their careful reviews, comments, and corrections.</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <aside class="caniuse-status" data-deco data-dfn-id="matrix">
   <input class="caniuse-panel-btn" type="button" value="⋰">
   <p class="support"><b>Support:</b><span class="android yes"><span>Android Browser</span><span>67+</span></span><span class="baidu partial"><span><span>Baidu Browser (limited)</span></span><span>7.12+</span></span><span class="bb partial"><span><span>Blackberry Browser (limited)</span></span><span>10+</span></span><span class="chrome partial"><span><span>Chrome (limited)</span></span><span>8+</span></span><span class="and_chr yes"><span>Chrome for Android</span><span>74+</span></span><span class="edge partial"><span><span>Edge (limited)</span></span><span>12+</span></span><span class="firefox partial"><span><span>Firefox (limited)</span></span><span>33+</span></span><span class="and_ff yes"><span>Firefox for Android</span><span>66+</span></span><span class="ie partial"><span><span>IE (limited)</span></span><span>10+</span></span><span class="ie_mob partial"><span><span>IE Mobile (limited)</span></span><span>10+</span></span><span class="kaios partial"><span><span>KaiOS Browser (limited)</span></span><span>2.5+</span></span><span class="opera partial"><span><span>Opera (limited)</span></span><span>15+</span></span><span class="op_mini no"><span>Opera Mini</span><span>None</span></span><span class="op_mob partial"><span><span>Opera Mobile (limited)</span></span><span>46+</span></span><span class="and_qq partial"><span><span>QQ Browser (limited)</span></span><span>1.2+</span></span><span class="safari partial"><span><span>Safari (limited)</span></span><span>5+</span></span><span class="samsung partial"><span><span>Samsung Internet (limited)</span></span><span>4+</span></span><span class="and_uc partial"><span><span>UC Browser for Android (limited)</span></span><span>11.8+</span></span><span class="ios_saf partial"><span><span>iOS Safari (limited)</span></span><span>5.0+</span></span></p>
   <p class="caniuse">Source: <a href="https://caniuse.com/#feat=dommatrix">caniuse.com</a> as of 2019-06-04</p>
  </aside>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#4x4-abstract-matrix">4x4 abstract matrix</a><span>, in §6</span>
   <li>
    a
    <ul>
     <li><a href="#dom-dommatrixreadonly-a">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrix2dinit-a">dict-member for DOMMatrix2DInit</a><span>, in §6</span>
    </ul>
   <li>
    b
    <ul>
     <li><a href="#dom-dommatrixreadonly-b">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrix2dinit-b">dict-member for DOMMatrix2DInit</a><span>, in §6</span>
    </ul>
   <li>
    bottom
    <ul>
     <li><a href="#dom-domrectreadonly-bottom">attribute for DOMRectReadOnly</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-domrect-bottom">attribute for DOMRectReadOnly DOMRect</a><span>, in §3</span>
    </ul>
   <li>
    c
    <ul>
     <li><a href="#dom-dommatrixreadonly-c">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrix2dinit-c">dict-member for DOMMatrix2DInit</a><span>, in §6</span>
    </ul>
   <li>
    constructor()
    <ul>
     <li><a href="#dom-dommatrix-dommatrix">constructor for DOMMatrix</a><span>, in §6.3</span>
     <li><a href="#dom-dommatrixreadonly-dommatrixreadonly">constructor for DOMMatrixReadOnly</a><span>, in §6.3</span>
     <li><a href="#dom-dompoint-dompoint">constructor for DOMPoint</a><span>, in §2</span>
     <li><a href="#dom-dompointreadonly-dompointreadonly">constructor for DOMPointReadOnly</a><span>, in §2</span>
     <li><a href="#dom-domquad-domquad">constructor for DOMQuad</a><span>, in §5</span>
     <li><a href="#dom-domrect-domrect">constructor for DOMRect</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-domrectreadonly">constructor for DOMRectReadOnly</a><span>, in §3</span>
    </ul>
   <li>
    constructor(init)
    <ul>
     <li><a href="#dom-dommatrix-dommatrix">constructor for DOMMatrix</a><span>, in §6.3</span>
     <li><a href="#dom-dommatrixreadonly-dommatrixreadonly">constructor for DOMMatrixReadOnly</a><span>, in §6.3</span>
    </ul>
   <li><a href="#dom-domquad-domquad">constructor(p1)</a><span>, in §5</span>
   <li><a href="#dom-domquad-domquad">constructor(p1, p2)</a><span>, in §5</span>
   <li><a href="#dom-domquad-domquad">constructor(p1, p2, p3)</a><span>, in §5</span>
   <li><a href="#dom-domquad-domquad">constructor(p1, p2, p3, p4)</a><span>, in §5</span>
   <li>
    constructor(x)
    <ul>
     <li><a href="#dom-dompoint-dompoint">constructor for DOMPoint</a><span>, in §2</span>
     <li><a href="#dom-dompointreadonly-dompointreadonly">constructor for DOMPointReadOnly</a><span>, in §2</span>
     <li><a href="#dom-domrect-domrect">constructor for DOMRect</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-domrectreadonly">constructor for DOMRectReadOnly</a><span>, in §3</span>
    </ul>
   <li>
    constructor(x, y)
    <ul>
     <li><a href="#dom-dompoint-dompoint">constructor for DOMPoint</a><span>, in §2</span>
     <li><a href="#dom-dompointreadonly-dompointreadonly">constructor for DOMPointReadOnly</a><span>, in §2</span>
     <li><a href="#dom-domrect-domrect">constructor for DOMRect</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-domrectreadonly">constructor for DOMRectReadOnly</a><span>, in §3</span>
    </ul>
   <li>
    constructor(x, y, width)
    <ul>
     <li><a href="#dom-domrect-domrect">constructor for DOMRect</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-domrectreadonly">constructor for DOMRectReadOnly</a><span>, in §3</span>
    </ul>
   <li>
    constructor(x, y, width, height)
    <ul>
     <li><a href="#dom-domrect-domrect">constructor for DOMRect</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-domrectreadonly">constructor for DOMRectReadOnly</a><span>, in §3</span>
    </ul>
   <li>
    constructor(x, y, z)
    <ul>
     <li><a href="#dom-dompoint-dompoint">constructor for DOMPoint</a><span>, in §2</span>
     <li><a href="#dom-dompointreadonly-dompointreadonly">constructor for DOMPointReadOnly</a><span>, in §2</span>
    </ul>
   <li>
    constructor(x, y, z, w)
    <ul>
     <li><a href="#dom-dompoint-dompoint">constructor for DOMPoint</a><span>, in §2</span>
     <li><a href="#dom-dompointreadonly-dompointreadonly">constructor for DOMPointReadOnly</a><span>, in §2</span>
    </ul>
   <li><a href="#create-a-2d-matrix">create a 2d matrix</a><span>, in §6.3</span>
   <li><a href="#create-a-3d-matrix">create a 3d matrix</a><span>, in §6.3</span>
   <li><a href="#create-a-dommatrix-from-the-2d-dictionary">create a DOMMatrix from the 2D dictionary</a><span>, in §6.3</span>
   <li><a href="#create-a-dommatrix-from-the-dictionary">create a DOMMatrix from the dictionary</a><span>, in §6.3</span>
   <li><a href="#create-a-dommatrixreadonly-from-the-2d-dictionary">create a DOMMatrixReadOnly from the 2D dictionary</a><span>, in §6.3</span>
   <li><a href="#create-a-dommatrixreadonly-from-the-dictionary">create a DOMMatrixReadOnly from the dictionary</a><span>, in §6.3</span>
   <li><a href="#create-a-dompoint-from-the-dictionary">create a DOMPoint from the dictionary</a><span>, in §2</span>
   <li><a href="#create-a-dompointreadonly-from-the-dictionary">create a DOMPointReadOnly from the dictionary</a><span>, in §2</span>
   <li><a href="#create-a-domquad-from-the-domquadinit-dictionary">create a DOMQuad from the DOMQuadInit dictionary</a><span>, in §5</span>
   <li><a href="#create-a-domquad-from-the-domrectinit-dictionary">create a DOMQuad from the DOMRectInit dictionary</a><span>, in §5</span>
   <li><a href="#create-a-domrect-from-the-dictionary">create a DOMRect from the dictionary</a><span>, in §3</span>
   <li><a href="#create-a-domrectreadonly-from-the-dictionary">create a DOMRectReadOnly from the dictionary</a><span>, in §3</span>
   <li>
    d
    <ul>
     <li><a href="#dom-dommatrixreadonly-d">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrix2dinit-d">dict-member for DOMMatrix2DInit</a><span>, in §6</span>
    </ul>
   <li><a href="#dom-dommatrix-dommatrix">DOMMatrix()</a><span>, in §6.3</span>
   <li><a href="#dommatrix">DOMMatrix</a><span>, in §6</span>
   <li><a href="#dictdef-dommatrix2dinit">DOMMatrix2DInit</a><span>, in §6</span>
   <li><a href="#dom-dommatrix-dommatrix">DOMMatrix(init)</a><span>, in §6.3</span>
   <li><a href="#dictdef-dommatrixinit">DOMMatrixInit</a><span>, in §6</span>
   <li><a href="#dom-dommatrixreadonly-dommatrixreadonly">DOMMatrixReadOnly()</a><span>, in §6.3</span>
   <li><a href="#dommatrixreadonly">DOMMatrixReadOnly</a><span>, in §6</span>
   <li><a href="#dom-dommatrixreadonly-dommatrixreadonly">DOMMatrixReadOnly(init)</a><span>, in §6.3</span>
   <li><a href="#dom-dompoint-dompoint">DOMPoint()</a><span>, in §2</span>
   <li><a href="#dompoint">DOMPoint</a><span>, in §2</span>
   <li><a href="#dictdef-dompointinit">DOMPointInit</a><span>, in §2</span>
   <li><a href="#dompointreadonly">DOMPointReadOnly</a><span>, in §2</span>
   <li><a href="#dom-dompointreadonly-dompointreadonly">DOMPointReadOnly()</a><span>, in §2</span>
   <li><a href="#dom-dompointreadonly-dompointreadonly">DOMPointReadOnly(x)</a><span>, in §2</span>
   <li><a href="#dom-dompointreadonly-dompointreadonly">DOMPointReadOnly(x, y)</a><span>, in §2</span>
   <li><a href="#dom-dompointreadonly-dompointreadonly">DOMPointReadOnly(x, y, z)</a><span>, in §2</span>
   <li><a href="#dom-dompointreadonly-dompointreadonly">DOMPointReadOnly(x, y, z, w)</a><span>, in §2</span>
   <li><a href="#dom-dompoint-dompoint">DOMPoint(x)</a><span>, in §2</span>
   <li><a href="#dom-dompoint-dompoint">DOMPoint(x, y)</a><span>, in §2</span>
   <li><a href="#dom-dompoint-dompoint">DOMPoint(x, y, z)</a><span>, in §2</span>
   <li><a href="#dom-dompoint-dompoint">DOMPoint(x, y, z, w)</a><span>, in §2</span>
   <li><a href="#dom-domquad-domquad">DOMQuad()</a><span>, in §5</span>
   <li><a href="#domquad">DOMQuad</a><span>, in §5</span>
   <li><a href="#dictdef-domquadinit">DOMQuadInit</a><span>, in §5</span>
   <li><a href="#dom-domquad-domquad">DOMQuad(p1)</a><span>, in §5</span>
   <li><a href="#dom-domquad-domquad">DOMQuad(p1, p2)</a><span>, in §5</span>
   <li><a href="#dom-domquad-domquad">DOMQuad(p1, p2, p3)</a><span>, in §5</span>
   <li><a href="#dom-domquad-domquad">DOMQuad(p1, p2, p3, p4)</a><span>, in §5</span>
   <li><a href="#domrect">DOMRect</a><span>, in §3</span>
   <li><a href="#dom-domrect-domrect">DOMRect()</a><span>, in §3</span>
   <li><a href="#dictdef-domrectinit">DOMRectInit</a><span>, in §3</span>
   <li><a href="#domrectlist">DOMRectList</a><span>, in §4</span>
   <li><a href="#dom-domrectreadonly-domrectreadonly">DOMRectReadOnly()</a><span>, in §3</span>
   <li><a href="#domrectreadonly">DOMRectReadOnly</a><span>, in §3</span>
   <li><a href="#dom-domrectreadonly-domrectreadonly">DOMRectReadOnly(x)</a><span>, in §3</span>
   <li><a href="#dom-domrectreadonly-domrectreadonly">DOMRectReadOnly(x, y)</a><span>, in §3</span>
   <li><a href="#dom-domrectreadonly-domrectreadonly">DOMRectReadOnly(x, y, width)</a><span>, in §3</span>
   <li><a href="#dom-domrectreadonly-domrectreadonly">DOMRectReadOnly(x, y, width, height)</a><span>, in §3</span>
   <li><a href="#dom-domrect-domrect">DOMRect(x)</a><span>, in §3</span>
   <li><a href="#dom-domrect-domrect">DOMRect(x, y)</a><span>, in §3</span>
   <li><a href="#dom-domrect-domrect">DOMRect(x, y, width)</a><span>, in §3</span>
   <li><a href="#dom-domrect-domrect">DOMRect(x, y, width, height)</a><span>, in §3</span>
   <li>
    e
    <ul>
     <li><a href="#dom-dommatrixreadonly-e">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrix2dinit-e">dict-member for DOMMatrix2DInit</a><span>, in §6</span>
    </ul>
   <li>
    f
    <ul>
     <li><a href="#dom-dommatrixreadonly-f">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrix2dinit-f">dict-member for DOMMatrix2DInit</a><span>, in §6</span>
    </ul>
   <li><a href="#dom-dommatrixreadonly-flipx">flipX()</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-flipy">flipY()</a><span>, in §6.5</span>
   <li>
    fromFloat32Array(array32)
    <ul>
     <li><a href="#dom-dommatrix-fromfloat32array">method for DOMMatrix</a><span>, in §6.3</span>
     <li><a href="#dom-dommatrixreadonly-fromfloat32array">method for DOMMatrixReadOnly</a><span>, in §6.3</span>
    </ul>
   <li>
    fromFloat64Array(array64)
    <ul>
     <li><a href="#dom-dommatrix-fromfloat64array">method for DOMMatrix</a><span>, in §6.3</span>
     <li><a href="#dom-dommatrixreadonly-fromfloat64array">method for DOMMatrixReadOnly</a><span>, in §6.3</span>
    </ul>
   <li>
    fromMatrix()
    <ul>
     <li><a href="#dom-dommatrix-frommatrix">method for DOMMatrix</a><span>, in §6.3</span>
     <li><a href="#dom-dommatrixreadonly-frommatrix">method for DOMMatrixReadOnly</a><span>, in §6.3</span>
    </ul>
   <li>
    fromMatrix(other)
    <ul>
     <li><a href="#dom-dommatrix-frommatrix">method for DOMMatrix</a><span>, in §6.3</span>
     <li><a href="#dom-dommatrixreadonly-frommatrix">method for DOMMatrixReadOnly</a><span>, in §6.3</span>
    </ul>
   <li>
    fromPoint()
    <ul>
     <li><a href="#dom-dompoint-frompoint">method for DOMPoint</a><span>, in §2</span>
     <li><a href="#dom-dompointreadonly-frompoint">method for DOMPointReadOnly</a><span>, in §2</span>
    </ul>
   <li>
    fromPoint(other)
    <ul>
     <li><a href="#dom-dompoint-frompoint">method for DOMPoint</a><span>, in §2</span>
     <li><a href="#dom-dompointreadonly-frompoint">method for DOMPointReadOnly</a><span>, in §2</span>
    </ul>
   <li><a href="#dom-domquad-fromquad">fromQuad()</a><span>, in §5</span>
   <li><a href="#dom-domquad-fromquad">fromQuad(other)</a><span>, in §5</span>
   <li>
    fromRect()
    <ul>
     <li><a href="#dom-domquad-fromrect">method for DOMQuad</a><span>, in §5</span>
     <li><a href="#dom-domrect-fromrect">method for DOMRect</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-fromrect">method for DOMRectReadOnly</a><span>, in §3</span>
    </ul>
   <li>
    fromRect(other)
    <ul>
     <li><a href="#dom-domquad-fromrect">method for DOMQuad</a><span>, in §5</span>
     <li><a href="#dom-domrect-fromrect">method for DOMRect</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-fromrect">method for DOMRectReadOnly</a><span>, in §3</span>
    </ul>
   <li><a href="#dom-domquad-getbounds">getBounds()</a><span>, in §5</span>
   <li>
    height
    <ul>
     <li><a href="#dom-domrect-height">attribute for DOMRect</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-height">attribute for DOMRectReadOnly</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-domrect-height">attribute for DOMRectReadOnly DOMRect</a><span>, in §3</span>
     <li><a href="#dom-domrectinit-height">dict-member for DOMRectInit</a><span>, in §3</span>
    </ul>
   <li><a href="#rectangle-height-dimension">height dimension</a><span>, in §3</span>
   <li><a href="#dom-dommatrixreadonly-inverse">inverse()</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrix-invertself">invertSelf()</a><span>, in §6.6</span>
   <li><a href="#matrix-is-2d">is 2D</a><span>, in §6.4</span>
   <li>
    is2D
    <ul>
     <li><a href="#dom-dommatrixreadonly-is2d">attribute for DOMMatrixReadOnly</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrixinit-is2d">dict-member for DOMMatrixInit</a><span>, in §6</span>
    </ul>
   <li><a href="#dom-dommatrixreadonly-isidentity">isIdentity</a><span>, in §6.4</span>
   <li><a href="#dom-domrectlist-item">item(index)</a><span>, in §4</span>
   <li>
    left
    <ul>
     <li><a href="#dom-domrectreadonly-left">attribute for DOMRectReadOnly</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-domrect-left">attribute for DOMRectReadOnly DOMRect</a><span>, in §3</span>
    </ul>
   <li><a href="#dom-domrectlist-length">length</a><span>, in §4</span>
   <li>
    m11
    <ul>
     <li><a href="#dom-dommatrixreadonly-m11">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrix2dinit-m11">dict-member for DOMMatrix2DInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m11-element">m11 element</a><span>, in §6</span>
   <li>
    m12
    <ul>
     <li><a href="#dom-dommatrixreadonly-m12">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrix2dinit-m12">dict-member for DOMMatrix2DInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m12-element">m12 element</a><span>, in §6</span>
   <li>
    m13
    <ul>
     <li><a href="#dom-dommatrixreadonly-m13">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrixinit-m13">dict-member for DOMMatrixInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m13-element">m13 element</a><span>, in §6</span>
   <li>
    m14
    <ul>
     <li><a href="#dom-dommatrixreadonly-m14">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrixinit-m14">dict-member for DOMMatrixInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m14-element">m14 element</a><span>, in §6</span>
   <li>
    m21
    <ul>
     <li><a href="#dom-dommatrixreadonly-m21">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrix2dinit-m21">dict-member for DOMMatrix2DInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m21-element">m21 element</a><span>, in §6</span>
   <li>
    m22
    <ul>
     <li><a href="#dom-dommatrixreadonly-m22">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrix2dinit-m22">dict-member for DOMMatrix2DInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m22-element">m22 element</a><span>, in §6</span>
   <li>
    m23
    <ul>
     <li><a href="#dom-dommatrixreadonly-m23">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrixinit-m23">dict-member for DOMMatrixInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m23-element">m23 element</a><span>, in §6</span>
   <li>
    m24
    <ul>
     <li><a href="#dom-dommatrixreadonly-m24">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrixinit-m24">dict-member for DOMMatrixInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m24-element">m24 element</a><span>, in §6</span>
   <li>
    m31
    <ul>
     <li><a href="#dom-dommatrixreadonly-m31">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrixinit-m31">dict-member for DOMMatrixInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m31-element">m31 element</a><span>, in §6</span>
   <li>
    m32
    <ul>
     <li><a href="#dom-dommatrixreadonly-m32">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrixinit-m32">dict-member for DOMMatrixInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m32-element">m32 element</a><span>, in §6</span>
   <li>
    m33
    <ul>
     <li><a href="#dom-dommatrixreadonly-m33">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrixinit-m33">dict-member for DOMMatrixInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m33-element">m33 element</a><span>, in §6</span>
   <li>
    m34
    <ul>
     <li><a href="#dom-dommatrixreadonly-m34">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrixinit-m34">dict-member for DOMMatrixInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m34-element">m34 element</a><span>, in §6</span>
   <li>
    m41
    <ul>
     <li><a href="#dom-dommatrixreadonly-m41">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrix2dinit-m41">dict-member for DOMMatrix2DInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m41-element">m41 element</a><span>, in §6</span>
   <li>
    m42
    <ul>
     <li><a href="#dom-dommatrixreadonly-m42">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrix2dinit-m42">dict-member for DOMMatrix2DInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m42-element">m42 element</a><span>, in §6</span>
   <li>
    m43
    <ul>
     <li><a href="#dom-dommatrixreadonly-m43">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrixinit-m43">dict-member for DOMMatrixInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m43-element">m43 element</a><span>, in §6</span>
   <li>
    m44
    <ul>
     <li><a href="#dom-dommatrixreadonly-m44">attribute for DOMMatrixReadOnly, DOMMatrix</a><span>, in §6.4</span>
     <li><a href="#dom-dommatrixinit-m44">dict-member for DOMMatrixInit</a><span>, in §6</span>
    </ul>
   <li><a href="#matrix-m44-element">m44 element</a><span>, in §6</span>
   <li><a href="#matrix">matrix</a><span>, in §6</span>
   <li><a href="#dom-dompointreadonly-matrixtransform">matrixTransform()</a><span>, in §2</span>
   <li><a href="#dom-dompointreadonly-matrixtransform">matrixTransform(matrix)</a><span>, in §2</span>
   <li><a href="#dom-dommatrixreadonly-multiply">multiply()</a><span>, in §6.5</span>
   <li><a href="#multiply">multiply</a><span>, in §6</span>
   <li><a href="#dom-dommatrixreadonly-multiply">multiply(other)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrix-multiplyself">multiplySelf()</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-multiplyself">multiplySelf(other)</a><span>, in §6.6</span>
   <li><a href="#rectangle-origin">origin</a><span>, in §3</span>
   <li>
    p1
    <ul>
     <li><a href="#dom-domquad-p1">attribute for DOMQuad</a><span>, in §5</span>
     <li><a href="#dom-domquadinit-p1">dict-member for DOMQuadInit</a><span>, in §5</span>
    </ul>
   <li>
    p2
    <ul>
     <li><a href="#dom-domquad-p2">attribute for DOMQuad</a><span>, in §5</span>
     <li><a href="#dom-domquadinit-p2">dict-member for DOMQuadInit</a><span>, in §5</span>
    </ul>
   <li>
    p3
    <ul>
     <li><a href="#dom-domquad-p3">attribute for DOMQuad</a><span>, in §5</span>
     <li><a href="#dom-domquadinit-p3">dict-member for DOMQuadInit</a><span>, in §5</span>
    </ul>
   <li>
    p4
    <ul>
     <li><a href="#dom-domquad-p4">attribute for DOMQuad</a><span>, in §5</span>
     <li><a href="#dom-domquadinit-p4">dict-member for DOMQuadInit</a><span>, in §5</span>
    </ul>
   <li><a href="#parse-a-string-into-an-abstract-matrix">parse a string into an abstract matrix</a><span>, in §6.2</span>
   <li><a href="#point">point</a><span>, in §2</span>
   <li><a href="#quadrilateral-point-1">point 1</a><span>, in §5</span>
   <li><a href="#quadrilateral-point-2">point 2</a><span>, in §5</span>
   <li><a href="#quadrilateral-point-3">point 3</a><span>, in §5</span>
   <li><a href="#quadrilateral-point-4">point 4</a><span>, in §5</span>
   <li><a href="#post-multiply">post-multiply</a><span>, in §6</span>
   <li><a href="#pre-multiply">pre-multiply</a><span>, in §6</span>
   <li><a href="#dom-dommatrix-premultiplyself">preMultiplySelf()</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-premultiplyself">preMultiplySelf(other)</a><span>, in §6.6</span>
   <li><a href="#quadrilateral">quadrilateral</a><span>, in §5</span>
   <li><a href="#rectangle">rectangle</a><span>, in §3</span>
   <li>
    right
    <ul>
     <li><a href="#dom-domrectreadonly-right">attribute for DOMRectReadOnly</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-domrect-right">attribute for DOMRectReadOnly DOMRect</a><span>, in §3</span>
    </ul>
   <li><a href="#dom-dommatrixreadonly-rotate">rotate()</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-rotateaxisangle">rotateAxisAngle()</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrix-rotateaxisangleself">rotateAxisAngleSelf()</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-rotateaxisangleself">rotateAxisAngleSelf(x)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-rotateaxisangleself">rotateAxisAngleSelf(x, y)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-rotateaxisangleself">rotateAxisAngleSelf(x, y, z)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-rotateaxisangleself">rotateAxisAngleSelf(x, y, z, angle)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrixreadonly-rotateaxisangle">rotateAxisAngle(x)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-rotateaxisangle">rotateAxisAngle(x, y)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-rotateaxisangle">rotateAxisAngle(x, y, z)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-rotateaxisangle">rotateAxisAngle(x, y, z, angle)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-rotatefromvector">rotateFromVector()</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrix-rotatefromvectorself">rotateFromVectorSelf()</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-rotatefromvectorself">rotateFromVectorSelf(x)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-rotatefromvectorself">rotateFromVectorSelf(x, y)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrixreadonly-rotatefromvector">rotateFromVector(x)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-rotatefromvector">rotateFromVector(x, y)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-rotate">rotate(rotX)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-rotate">rotate(rotX, rotY)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-rotate">rotate(rotX, rotY, rotZ)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrix-rotateself">rotateSelf()</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-rotateself">rotateSelf(rotX)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-rotateself">rotateSelf(rotX, rotY)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-rotateself">rotateSelf(rotX, rotY, rotZ)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrixreadonly-scale">scale()</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-scale3d">scale3d()</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-scale3d">scale3d(scale)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-scale3d">scale3d(scale, originX)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-scale3d">scale3d(scale, originX, originY)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-scale3d">scale3d(scale, originX, originY, originZ)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrix-scale3dself">scale3dSelf()</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-scale3dself">scale3dSelf(scale)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-scale3dself">scale3dSelf(scale, originX)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-scale3dself">scale3dSelf(scale, originX, originY)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-scale3dself">scale3dSelf(scale, originX, originY, originZ)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrixreadonly-scalenonuniform">scaleNonUniform()</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-scalenonuniform">scaleNonUniform(scaleX)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-scalenonuniform">scaleNonUniform(scaleX, scaleY)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-scale">scale(scaleX)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-scale">scale(scaleX, scaleY)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-scale">scale(scaleX, scaleY, scaleZ)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-scale">scale(scaleX, scaleY, scaleZ, originX)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-scale">scale(scaleX, scaleY, scaleZ, originX, originY)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-scale">scale(scaleX, scaleY, scaleZ, originX, originY, originZ)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrix-scaleself">scaleSelf()</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-scaleself">scaleSelf(scaleX)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-scaleself">scaleSelf(scaleX, scaleY)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-scaleself">scaleSelf(scaleX, scaleY, scaleZ)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-scaleself">scaleSelf(scaleX, scaleY, scaleZ, originX)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-scaleself">scaleSelf(scaleX, scaleY, scaleZ, originX, originY)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-scaleself">scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-setmatrixvalue">setMatrixValue(transformList)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrixreadonly-skewx">skewX()</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrix-skewxself">skewXSelf()</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-skewxself">skewXSelf(sx)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrixreadonly-skewx">skewX(sx)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-skewy">skewY()</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrix-skewyself">skewYSelf()</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-skewyself">skewYSelf(sy)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrixreadonly-skewy">skewY(sy)</a><span>, in §6.5</span>
   <li><a href="#dommatrixreadonly-stringification-behavior">stringificationbehavior</a><span>, in §6.5</span>
   <li><a href="#svgmatrix">SVGMatrix</a><span>, in §6</span>
   <li><a href="#svgpoint">SVGPoint</a><span>, in §2</span>
   <li><a href="#svgrect">SVGRect</a><span>, in §3</span>
   <li><a href="#dom-dommatrixreadonly-tofloat32array">toFloat32Array()</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-tofloat64array">toFloat64Array()</a><span>, in §6.5</span>
   <li>
    toJSON()
    <ul>
     <li><a href="#dom-dommatrixreadonly-tojson">method for DOMMatrixReadOnly</a><span>, in §6</span>
     <li><a href="#dom-dompointreadonly-tojson">method for DOMPointReadOnly</a><span>, in §2</span>
     <li><a href="#dom-domquad-tojson">method for DOMQuad</a><span>, in §5</span>
     <li><a href="#dom-domrectreadonly-tojson">method for DOMRectReadOnly</a><span>, in §3</span>
    </ul>
   <li>
    top
    <ul>
     <li><a href="#dom-domrectreadonly-top">attribute for DOMRectReadOnly</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-domrect-top">attribute for DOMRectReadOnly DOMRect</a><span>, in §3</span>
    </ul>
   <li><a href="#transform-a-point-with-a-matrix">transform a point with a matrix</a><span>, in §2.1</span>
   <li><a href="#dom-dommatrixreadonly-transformpoint">transformPoint()</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-transformpoint">transformPoint(point)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-translate">translate()</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrix-translateself">translateSelf()</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-translateself">translateSelf(tx)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-translateself">translateSelf(tx, ty)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrix-translateself">translateSelf(tx, ty, tz)</a><span>, in §6.6</span>
   <li><a href="#dom-dommatrixreadonly-translate">translate(tx)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-translate">translate(tx, ty)</a><span>, in §6.5</span>
   <li><a href="#dom-dommatrixreadonly-translate">translate(tx, ty, tz)</a><span>, in §6.5</span>
   <li><a href="#matrix-validate-and-fixup">validate and fixup</a><span>, in §6.1</span>
   <li><a href="#matrix-validate-and-fixup-2d">validate and fixup (2D)</a><span>, in §6.1</span>
   <li>
    w
    <ul>
     <li><a href="#dom-dompointreadonly-w">attribute for DOMPointReadOnly, DOMPoint</a><span>, in §2</span>
     <li><a href="#dom-dompointinit-w">dict-member for DOMPointInit</a><span>, in §2</span>
    </ul>
   <li><a href="#webkitcssmatrix">WebKitCSSMatrix</a><span>, in §6</span>
   <li>
    width
    <ul>
     <li><a href="#dom-domrect-width">attribute for DOMRect</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-width">attribute for DOMRectReadOnly</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-domrect-width">attribute for DOMRectReadOnly DOMRect</a><span>, in §3</span>
     <li><a href="#dom-domrectinit-width">dict-member for DOMRectInit</a><span>, in §3</span>
    </ul>
   <li><a href="#rectangle-width-dimension">width dimension</a><span>, in §3</span>
   <li><a href="#point-w-perspective">w perspective</a><span>, in §2</span>
   <li>
    x
    <ul>
     <li><a href="#dom-dompointreadonly-x">attribute for DOMPointReadOnly, DOMPoint</a><span>, in §2</span>
     <li><a href="#dom-domrect-x">attribute for DOMRect</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-x">attribute for DOMRectReadOnly</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-domrect-x">attribute for DOMRectReadOnly DOMRect</a><span>, in §3</span>
     <li><a href="#dom-dompointinit-x">dict-member for DOMPointInit</a><span>, in §2</span>
     <li><a href="#dom-domrectinit-x">dict-member for DOMRectInit</a><span>, in §3</span>
    </ul>
   <li>
    x coordinate
    <ul>
     <li><a href="#point-x-coordinate">dfn for point</a><span>, in §2</span>
     <li><a href="#rectangle-x-coordinate">dfn for rectangle</a><span>, in §3</span>
    </ul>
   <li>
    y
    <ul>
     <li><a href="#dom-dompointreadonly-y">attribute for DOMPointReadOnly, DOMPoint</a><span>, in §2</span>
     <li><a href="#dom-domrect-y">attribute for DOMRect</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-y">attribute for DOMRectReadOnly</a><span>, in §3</span>
     <li><a href="#dom-domrectreadonly-domrect-y">attribute for DOMRectReadOnly DOMRect</a><span>, in §3</span>
     <li><a href="#dom-dompointinit-y">dict-member for DOMPointInit</a><span>, in §2</span>
     <li><a href="#dom-domrectinit-y">dict-member for DOMRectInit</a><span>, in §3</span>
    </ul>
   <li>
    y coordinate
    <ul>
     <li><a href="#point-y-coordinate">dfn for point</a><span>, in §2</span>
     <li><a href="#rectangle-y-coordinate">dfn for rectangle</a><span>, in §3</span>
    </ul>
   <li>
    z
    <ul>
     <li><a href="#dom-dompointreadonly-z">attribute for DOMPointReadOnly, DOMPoint</a><span>, in §2</span>
     <li><a href="#dom-dompointinit-z">dict-member for DOMPointInit</a><span>, in §2</span>
    </ul>
   <li><a href="#point-z-coordinate">z coordinate</a><span>, in §2</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-typedef-transform-function">
   <a href="https://drafts.csswg.org/css-transforms-2/#typedef-transform-function">https://drafts.csswg.org/css-transforms-2/#typedef-transform-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-transform-function">6.2. Parsing a string into an abstract matrix</a> <a href="#ref-for-typedef-transform-function①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-matrix3d">
   <a href="https://drafts.csswg.org/css-transforms-2/#funcdef-matrix3d">https://drafts.csswg.org/css-transforms-2/#funcdef-matrix3d</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-matrix3d">6.5. Immutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-length-value">
   <a href="https://drafts.csswg.org/css-values-3/#length-value">https://drafts.csswg.org/css-values-3/#length-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-length-value">6.2. Parsing a string into an abstract matrix</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-absolute-length">
   <a href="https://drafts.csswg.org/css-values-4/#absolute-length">https://drafts.csswg.org/css-values-4/#absolute-length</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-absolute-length">6.2. Parsing a string into an abstract matrix</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-parse-something-according-to-a-css-grammar">
   <a href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar">https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-parse-something-according-to-a-css-grammar">6.2. Parsing a string into an abstract matrix</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-transform-list">
   <a href="https://drafts.csswg.org/css-transforms-1/#typedef-transform-list">https://drafts.csswg.org/css-transforms-1/#typedef-transform-list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-transform-list">6.2. Parsing a string into an abstract matrix</a> <a href="#ref-for-typedef-transform-list①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-transform-matrix">
   <a href="https://drafts.csswg.org/css-transforms-1/#funcdef-transform-matrix">https://drafts.csswg.org/css-transforms-1/#funcdef-transform-matrix</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-transform-matrix">6.5. Immutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-transform">
   <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform">https://drafts.csswg.org/css-transforms-1/#propdef-transform</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-transform">6.2. Parsing a string into an abstract matrix</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-element-getboundingclientrect">
   <a href="https://drafts.csswg.org/cssom-view-1/#dom-element-getboundingclientrect">https://drafts.csswg.org/cssom-view-1/#dom-element-getboundingclientrect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-element-getboundingclientrect">8. Privacy and Security Considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-algorithm-conventions">
   <a href="https://tc39.github.io/ecma262/#sec-algorithm-conventions">https://tc39.github.io/ecma262/#sec-algorithm-conventions</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-algorithm-conventions">6.5. Immutable transformation methods</a> <a href="#ref-for-sec-algorithm-conventions①">(2)</a> <a href="#ref-for-sec-algorithm-conventions②">(3)</a> <a href="#ref-for-sec-algorithm-conventions③">(4)</a> <a href="#ref-for-sec-algorithm-conventions④">(5)</a> <a href="#ref-for-sec-algorithm-conventions⑤">(6)</a> <a href="#ref-for-sec-algorithm-conventions⑥">(7)</a> <a href="#ref-for-sec-algorithm-conventions⑦">(8)</a> <a href="#ref-for-sec-algorithm-conventions⑧">(9)</a> <a href="#ref-for-sec-algorithm-conventions⑨">(10)</a> <a href="#ref-for-sec-algorithm-conventions①⓪">(11)</a> <a href="#ref-for-sec-algorithm-conventions①①">(12)</a> <a href="#ref-for-sec-algorithm-conventions①②">(13)</a> <a href="#ref-for-sec-algorithm-conventions①③">(14)</a> <a href="#ref-for-sec-algorithm-conventions①④">(15)</a> <a href="#ref-for-sec-algorithm-conventions①⑤">(16)</a> <a href="#ref-for-sec-algorithm-conventions①⑥">(17)</a> <a href="#ref-for-sec-algorithm-conventions①⑦">(18)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-samevaluezero">
   <a href="https://tc39.github.io/ecma262/#sec-samevaluezero">https://tc39.github.io/ecma262/#sec-samevaluezero</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-samevaluezero">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-sec-samevaluezero①">(2)</a> <a href="#ref-for-sec-samevaluezero②">(3)</a> <a href="#ref-for-sec-samevaluezero③">(4)</a> <a href="#ref-for-sec-samevaluezero④">(5)</a> <a href="#ref-for-sec-samevaluezero⑤">(6)</a> <a href="#ref-for-sec-samevaluezero⑥">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-tostring">
   <a href="https://tc39.github.io/ecma262/#sec-tostring">https://tc39.github.io/ecma262/#sec-tostring</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-tostring">6.5. Immutable transformation methods</a> <a href="#ref-for-sec-tostring①">(2)</a> <a href="#ref-for-sec-tostring②">(3)</a> <a href="#ref-for-sec-tostring③">(4)</a> <a href="#ref-for-sec-tostring④">(5)</a> <a href="#ref-for-sec-tostring⑤">(6)</a> <a href="#ref-for-sec-tostring⑥">(7)</a> <a href="#ref-for-sec-tostring⑦">(8)</a> <a href="#ref-for-sec-tostring⑧">(9)</a> <a href="#ref-for-sec-tostring⑨">(10)</a> <a href="#ref-for-sec-tostring①⓪">(11)</a> <a href="#ref-for-sec-tostring①①">(12)</a> <a href="#ref-for-sec-tostring①②">(13)</a> <a href="#ref-for-sec-tostring①③">(14)</a> <a href="#ref-for-sec-tostring①④">(15)</a> <a href="#ref-for-sec-tostring①⑤">(16)</a> <a href="#ref-for-sec-tostring①⑥">(17)</a> <a href="#ref-for-sec-tostring①⑦">(18)</a>
    <li><a href="#ref-for-sec-tostring①⑧">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-serializable">
   <a href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable">https://html.spec.whatwg.org/multipage/structured-data.html#serializable</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-serializable">2. The DOMPoint interfaces</a> <a href="#ref-for-serializable①">(2)</a>
    <li><a href="#ref-for-serializable②">3. The DOMRect interfaces</a> <a href="#ref-for-serializable③">(2)</a>
    <li><a href="#ref-for-serializable④">5. The DOMQuad interface</a>
    <li><a href="#ref-for-serializable⑤">6. The DOMMatrix interfaces</a> <a href="#ref-for-serializable⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-window①">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-worker">
   <a href="https://html.spec.whatwg.org/multipage/workers.html#worker">https://html.spec.whatwg.org/multipage/workers.html#worker</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worker">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-global-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object">https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-global-object">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-deserialization-steps">
   <a href="https://html.spec.whatwg.org/multipage/structured-data.html#deserialization-steps">https://html.spec.whatwg.org/multipage/structured-data.html#deserialization-steps</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-deserialization-steps">7. Structured serialization</a> <a href="#ref-for-deserialization-steps①">(2)</a> <a href="#ref-for-deserialization-steps②">(3)</a> <a href="#ref-for-deserialization-steps③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-serializable-objects">
   <a href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable-objects">https://html.spec.whatwg.org/multipage/structured-data.html#serializable-objects</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-serializable-objects">7. Structured serialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-serialization-steps">
   <a href="https://html.spec.whatwg.org/multipage/structured-data.html#serialization-steps">https://html.spec.whatwg.org/multipage/structured-data.html#serialization-steps</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-serialization-steps">7. Structured serialization</a> <a href="#ref-for-serialization-steps①">(2)</a> <a href="#ref-for-serialization-steps②">(3)</a> <a href="#ref-for-serialization-steps③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sub-deserialization">
   <a href="https://html.spec.whatwg.org/multipage/structured-data.html#sub-deserialization">https://html.spec.whatwg.org/multipage/structured-data.html#sub-deserialization</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sub-deserialization">7. Structured serialization</a> <a href="#ref-for-sub-deserialization①">(2)</a> <a href="#ref-for-sub-deserialization②">(3)</a> <a href="#ref-for-sub-deserialization③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sub-serialization">
   <a href="https://html.spec.whatwg.org/multipage/structured-data.html#sub-serialization">https://html.spec.whatwg.org/multipage/structured-data.html#sub-serialization</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sub-serialization">7. Structured serialization</a> <a href="#ref-for-sub-serialization①">(2)</a> <a href="#ref-for-sub-serialization②">(3)</a> <a href="#ref-for-sub-serialization③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMException">
   <a href="https://heycam.github.io/webidl/#idl-DOMException">https://heycam.github.io/webidl/#idl-DOMException</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMException">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-idl-DOMException①">6.5. Immutable transformation methods</a>
    <li><a href="#ref-for-idl-DOMException②">6.6. Mutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">6. The DOMMatrix interfaces</a> <a href="#ref-for-idl-DOMString①">(2)</a> <a href="#ref-for-idl-DOMString②">(3)</a>
    <li><a href="#ref-for-idl-DOMString③">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-idl-DOMString④">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Default">
   <a href="https://heycam.github.io/webidl/#Default">https://heycam.github.io/webidl/#Default</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Default">2. The DOMPoint interfaces</a>
    <li><a href="#ref-for-Default①">3. The DOMRect interfaces</a>
    <li><a href="#ref-for-Default②">5. The DOMQuad interface</a>
    <li><a href="#ref-for-Default③">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">2. The DOMPoint interfaces</a> <a href="#ref-for-Exposed①">(2)</a>
    <li><a href="#ref-for-Exposed②">3. The DOMRect interfaces</a> <a href="#ref-for-Exposed③">(2)</a>
    <li><a href="#ref-for-Exposed④">4. The DOMRectList interface</a>
    <li><a href="#ref-for-Exposed⑤">5. The DOMQuad interface</a>
    <li><a href="#ref-for-Exposed⑥">6. The DOMMatrix interfaces</a> <a href="#ref-for-Exposed⑦">(2)</a> <a href="#ref-for-Exposed⑧">(3)</a> <a href="#ref-for-Exposed⑨">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-Float32Array">
   <a href="https://heycam.github.io/webidl/#idl-Float32Array">https://heycam.github.io/webidl/#idl-Float32Array</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-Float32Array">6. The DOMMatrix interfaces</a> <a href="#ref-for-idl-Float32Array①">(2)</a> <a href="#ref-for-idl-Float32Array②">(3)</a>
    <li><a href="#ref-for-idl-Float32Array③">6.5. Immutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-Float64Array">
   <a href="https://heycam.github.io/webidl/#idl-Float64Array">https://heycam.github.io/webidl/#idl-Float64Array</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-Float64Array">6. The DOMMatrix interfaces</a> <a href="#ref-for-idl-Float64Array①">(2)</a> <a href="#ref-for-idl-Float64Array②">(3)</a>
    <li><a href="#ref-for-idl-Float64Array③">6.5. Immutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-indexsizeerror">
   <a href="https://heycam.github.io/webidl/#indexsizeerror">https://heycam.github.io/webidl/#indexsizeerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-indexsizeerror">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidstateerror">
   <a href="https://heycam.github.io/webidl/#invalidstateerror">https://heycam.github.io/webidl/#invalidstateerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidstateerror">6.5. Immutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-LegacyWindowAlias">
   <a href="https://heycam.github.io/webidl/#LegacyWindowAlias">https://heycam.github.io/webidl/#LegacyWindowAlias</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-LegacyWindowAlias">2. The DOMPoint interfaces</a>
    <li><a href="#ref-for-LegacyWindowAlias①">3. The DOMRect interfaces</a>
    <li><a href="#ref-for-LegacyWindowAlias②">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-NewObject">
   <a href="https://heycam.github.io/webidl/#NewObject">https://heycam.github.io/webidl/#NewObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-NewObject">2. The DOMPoint interfaces</a> <a href="#ref-for-NewObject①">(2)</a> <a href="#ref-for-NewObject②">(3)</a>
    <li><a href="#ref-for-NewObject③">3. The DOMRect interfaces</a> <a href="#ref-for-NewObject④">(2)</a>
    <li><a href="#ref-for-NewObject⑤">5. The DOMQuad interface</a> <a href="#ref-for-NewObject⑥">(2)</a> <a href="#ref-for-NewObject⑦">(3)</a>
    <li><a href="#ref-for-NewObject⑧">6. The DOMMatrix interfaces</a> <a href="#ref-for-NewObject⑨">(2)</a> <a href="#ref-for-NewObject①⓪">(3)</a> <a href="#ref-for-NewObject①①">(4)</a> <a href="#ref-for-NewObject①②">(5)</a> <a href="#ref-for-NewObject①③">(6)</a> <a href="#ref-for-NewObject①④">(7)</a> <a href="#ref-for-NewObject①⑤">(8)</a> <a href="#ref-for-NewObject①⑥">(9)</a> <a href="#ref-for-NewObject①⑦">(10)</a> <a href="#ref-for-NewObject①⑧">(11)</a> <a href="#ref-for-NewObject①⑨">(12)</a> <a href="#ref-for-NewObject②⓪">(13)</a> <a href="#ref-for-NewObject②①">(14)</a> <a href="#ref-for-NewObject②②">(15)</a> <a href="#ref-for-NewObject②③">(16)</a> <a href="#ref-for-NewObject②④">(17)</a> <a href="#ref-for-NewObject②⑤">(18)</a> <a href="#ref-for-NewObject②⑥">(19)</a> <a href="#ref-for-NewObject②⑦">(20)</a> <a href="#ref-for-NewObject②⑧">(21)</a> <a href="#ref-for-NewObject②⑨">(22)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SameObject">
   <a href="https://heycam.github.io/webidl/#SameObject">https://heycam.github.io/webidl/#SameObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SameObject">5. The DOMQuad interface</a> <a href="#ref-for-SameObject①">(2)</a> <a href="#ref-for-SameObject②">(3)</a> <a href="#ref-for-SameObject③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-syntaxerror">
   <a href="https://heycam.github.io/webidl/#syntaxerror">https://heycam.github.io/webidl/#syntaxerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-syntaxerror">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-syntaxerror①">6.6. Mutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-exceptiondef-typeerror">
   <a href="https://heycam.github.io/webidl/#exceptiondef-typeerror">https://heycam.github.io/webidl/#exceptiondef-typeerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-exceptiondef-typeerror">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-exceptiondef-typeerror①">(2)</a>
    <li><a href="#ref-for-exceptiondef-typeerror②">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a> <a href="#ref-for-exceptiondef-typeerror③">(2)</a> <a href="#ref-for-exceptiondef-typeerror④">(3)</a> <a href="#ref-for-exceptiondef-typeerror⑤">(4)</a>
    <li><a href="#ref-for-exceptiondef-typeerror⑥">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">6. The DOMMatrix interfaces</a> <a href="#ref-for-idl-boolean①">(2)</a> <a href="#ref-for-idl-boolean②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-object">
   <a href="https://heycam.github.io/webidl/#idl-object">https://heycam.github.io/webidl/#idl-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-object">2. The DOMPoint interfaces</a>
    <li><a href="#ref-for-idl-object①">3. The DOMRect interfaces</a>
    <li><a href="#ref-for-idl-object②">5. The DOMQuad interface</a>
    <li><a href="#ref-for-idl-object③">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unrestricted-double">
   <a href="https://heycam.github.io/webidl/#idl-unrestricted-double">https://heycam.github.io/webidl/#idl-unrestricted-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unrestricted-double">2. The DOMPoint interfaces</a> <a href="#ref-for-idl-unrestricted-double①">(2)</a> <a href="#ref-for-idl-unrestricted-double②">(3)</a> <a href="#ref-for-idl-unrestricted-double③">(4)</a> <a href="#ref-for-idl-unrestricted-double④">(5)</a> <a href="#ref-for-idl-unrestricted-double⑤">(6)</a> <a href="#ref-for-idl-unrestricted-double⑥">(7)</a> <a href="#ref-for-idl-unrestricted-double⑦">(8)</a> <a href="#ref-for-idl-unrestricted-double⑧">(9)</a> <a href="#ref-for-idl-unrestricted-double⑨">(10)</a> <a href="#ref-for-idl-unrestricted-double①⓪">(11)</a> <a href="#ref-for-idl-unrestricted-double①①">(12)</a> <a href="#ref-for-idl-unrestricted-double①②">(13)</a> <a href="#ref-for-idl-unrestricted-double①③">(14)</a> <a href="#ref-for-idl-unrestricted-double①④">(15)</a> <a href="#ref-for-idl-unrestricted-double①⑤">(16)</a> <a href="#ref-for-idl-unrestricted-double①⑥">(17)</a> <a href="#ref-for-idl-unrestricted-double①⑦">(18)</a> <a href="#ref-for-idl-unrestricted-double①⑧">(19)</a> <a href="#ref-for-idl-unrestricted-double①⑨">(20)</a>
    <li><a href="#ref-for-idl-unrestricted-double②⓪">3. The DOMRect interfaces</a> <a href="#ref-for-idl-unrestricted-double②①">(2)</a> <a href="#ref-for-idl-unrestricted-double②②">(3)</a> <a href="#ref-for-idl-unrestricted-double②③">(4)</a> <a href="#ref-for-idl-unrestricted-double②④">(5)</a> <a href="#ref-for-idl-unrestricted-double②⑤">(6)</a> <a href="#ref-for-idl-unrestricted-double②⑥">(7)</a> <a href="#ref-for-idl-unrestricted-double②⑦">(8)</a> <a href="#ref-for-idl-unrestricted-double②⑧">(9)</a> <a href="#ref-for-idl-unrestricted-double②⑨">(10)</a> <a href="#ref-for-idl-unrestricted-double③⓪">(11)</a> <a href="#ref-for-idl-unrestricted-double③①">(12)</a> <a href="#ref-for-idl-unrestricted-double③②">(13)</a> <a href="#ref-for-idl-unrestricted-double③③">(14)</a> <a href="#ref-for-idl-unrestricted-double③④">(15)</a> <a href="#ref-for-idl-unrestricted-double③⑤">(16)</a> <a href="#ref-for-idl-unrestricted-double③⑥">(17)</a> <a href="#ref-for-idl-unrestricted-double③⑦">(18)</a> <a href="#ref-for-idl-unrestricted-double③⑧">(19)</a> <a href="#ref-for-idl-unrestricted-double③⑨">(20)</a> <a href="#ref-for-idl-unrestricted-double④⓪">(21)</a> <a href="#ref-for-idl-unrestricted-double④①">(22)</a> <a href="#ref-for-idl-unrestricted-double④②">(23)</a> <a href="#ref-for-idl-unrestricted-double④③">(24)</a>
    <li><a href="#ref-for-idl-unrestricted-double④④">6. The DOMMatrix interfaces</a> <a href="#ref-for-idl-unrestricted-double④⑤">(2)</a> <a href="#ref-for-idl-unrestricted-double④⑥">(3)</a> <a href="#ref-for-idl-unrestricted-double④⑦">(4)</a> <a href="#ref-for-idl-unrestricted-double④⑧">(5)</a> <a href="#ref-for-idl-unrestricted-double④⑨">(6)</a> <a href="#ref-for-idl-unrestricted-double⑤⓪">(7)</a> <a href="#ref-for-idl-unrestricted-double⑤①">(8)</a> <a href="#ref-for-idl-unrestricted-double⑤②">(9)</a> <a href="#ref-for-idl-unrestricted-double⑤③">(10)</a> <a href="#ref-for-idl-unrestricted-double⑤④">(11)</a> <a href="#ref-for-idl-unrestricted-double⑤⑤">(12)</a> <a href="#ref-for-idl-unrestricted-double⑤⑥">(13)</a> <a href="#ref-for-idl-unrestricted-double⑤⑦">(14)</a> <a href="#ref-for-idl-unrestricted-double⑤⑧">(15)</a> <a href="#ref-for-idl-unrestricted-double⑤⑨">(16)</a> <a href="#ref-for-idl-unrestricted-double⑥⓪">(17)</a> <a href="#ref-for-idl-unrestricted-double⑥①">(18)</a> <a href="#ref-for-idl-unrestricted-double⑥②">(19)</a> <a href="#ref-for-idl-unrestricted-double⑥③">(20)</a> <a href="#ref-for-idl-unrestricted-double⑥④">(21)</a> <a href="#ref-for-idl-unrestricted-double⑥⑤">(22)</a> <a href="#ref-for-idl-unrestricted-double⑥⑥">(23)</a> <a href="#ref-for-idl-unrestricted-double⑥⑦">(24)</a> <a href="#ref-for-idl-unrestricted-double⑥⑧">(25)</a> <a href="#ref-for-idl-unrestricted-double⑥⑨">(26)</a> <a href="#ref-for-idl-unrestricted-double⑦⓪">(27)</a> <a href="#ref-for-idl-unrestricted-double⑦①">(28)</a> <a href="#ref-for-idl-unrestricted-double⑦②">(29)</a> <a href="#ref-for-idl-unrestricted-double⑦③">(30)</a> <a href="#ref-for-idl-unrestricted-double⑦④">(31)</a> <a href="#ref-for-idl-unrestricted-double⑦⑤">(32)</a> <a href="#ref-for-idl-unrestricted-double⑦⑥">(33)</a> <a href="#ref-for-idl-unrestricted-double⑦⑦">(34)</a> <a href="#ref-for-idl-unrestricted-double⑦⑧">(35)</a> <a href="#ref-for-idl-unrestricted-double⑦⑨">(36)</a> <a href="#ref-for-idl-unrestricted-double⑧⓪">(37)</a> <a href="#ref-for-idl-unrestricted-double⑧①">(38)</a> <a href="#ref-for-idl-unrestricted-double⑧②">(39)</a> <a href="#ref-for-idl-unrestricted-double⑧③">(40)</a> <a href="#ref-for-idl-unrestricted-double⑧④">(41)</a> <a href="#ref-for-idl-unrestricted-double⑧⑤">(42)</a> <a href="#ref-for-idl-unrestricted-double⑧⑥">(43)</a> <a href="#ref-for-idl-unrestricted-double⑧⑦">(44)</a> <a href="#ref-for-idl-unrestricted-double⑧⑧">(45)</a> <a href="#ref-for-idl-unrestricted-double⑧⑨">(46)</a> <a href="#ref-for-idl-unrestricted-double⑨⓪">(47)</a> <a href="#ref-for-idl-unrestricted-double⑨①">(48)</a> <a href="#ref-for-idl-unrestricted-double⑨②">(49)</a> <a href="#ref-for-idl-unrestricted-double⑨③">(50)</a> <a href="#ref-for-idl-unrestricted-double⑨④">(51)</a> <a href="#ref-for-idl-unrestricted-double⑨⑤">(52)</a> <a href="#ref-for-idl-unrestricted-double⑨⑥">(53)</a> <a href="#ref-for-idl-unrestricted-double⑨⑦">(54)</a> <a href="#ref-for-idl-unrestricted-double⑨⑧">(55)</a> <a href="#ref-for-idl-unrestricted-double⑨⑨">(56)</a> <a href="#ref-for-idl-unrestricted-double①⓪⓪">(57)</a> <a href="#ref-for-idl-unrestricted-double①⓪①">(58)</a> <a href="#ref-for-idl-unrestricted-double①⓪②">(59)</a> <a href="#ref-for-idl-unrestricted-double①⓪③">(60)</a> <a href="#ref-for-idl-unrestricted-double①⓪④">(61)</a> <a href="#ref-for-idl-unrestricted-double①⓪⑤">(62)</a> <a href="#ref-for-idl-unrestricted-double①⓪⑥">(63)</a> <a href="#ref-for-idl-unrestricted-double①⓪⑦">(64)</a> <a href="#ref-for-idl-unrestricted-double①⓪⑧">(65)</a> <a href="#ref-for-idl-unrestricted-double①⓪⑨">(66)</a> <a href="#ref-for-idl-unrestricted-double①①⓪">(67)</a> <a href="#ref-for-idl-unrestricted-double①①①">(68)</a> <a href="#ref-for-idl-unrestricted-double①①②">(69)</a> <a href="#ref-for-idl-unrestricted-double①①③">(70)</a> <a href="#ref-for-idl-unrestricted-double①①④">(71)</a> <a href="#ref-for-idl-unrestricted-double①①⑤">(72)</a> <a href="#ref-for-idl-unrestricted-double①①⑥">(73)</a> <a href="#ref-for-idl-unrestricted-double①①⑦">(74)</a> <a href="#ref-for-idl-unrestricted-double①①⑧">(75)</a> <a href="#ref-for-idl-unrestricted-double①①⑨">(76)</a> <a href="#ref-for-idl-unrestricted-double①②⓪">(77)</a> <a href="#ref-for-idl-unrestricted-double①②①">(78)</a> <a href="#ref-for-idl-unrestricted-double①②②">(79)</a> <a href="#ref-for-idl-unrestricted-double①②③">(80)</a> <a href="#ref-for-idl-unrestricted-double①②④">(81)</a> <a href="#ref-for-idl-unrestricted-double①②⑤">(82)</a> <a href="#ref-for-idl-unrestricted-double①②⑥">(83)</a> <a href="#ref-for-idl-unrestricted-double①②⑦">(84)</a> <a href="#ref-for-idl-unrestricted-double①②⑧">(85)</a> <a href="#ref-for-idl-unrestricted-double①②⑨">(86)</a> <a href="#ref-for-idl-unrestricted-double①③⓪">(87)</a> <a href="#ref-for-idl-unrestricted-double①③①">(88)</a> <a href="#ref-for-idl-unrestricted-double①③②">(89)</a> <a href="#ref-for-idl-unrestricted-double①③③">(90)</a> <a href="#ref-for-idl-unrestricted-double①③④">(91)</a> <a href="#ref-for-idl-unrestricted-double①③⑤">(92)</a> <a href="#ref-for-idl-unrestricted-double①③⑥">(93)</a> <a href="#ref-for-idl-unrestricted-double①③⑦">(94)</a> <a href="#ref-for-idl-unrestricted-double①③⑧">(95)</a> <a href="#ref-for-idl-unrestricted-double①③⑨">(96)</a> <a href="#ref-for-idl-unrestricted-double①④⓪">(97)</a> <a href="#ref-for-idl-unrestricted-double①④①">(98)</a> <a href="#ref-for-idl-unrestricted-double①④②">(99)</a> <a href="#ref-for-idl-unrestricted-double①④③">(100)</a> <a href="#ref-for-idl-unrestricted-double①④④">(101)</a> <a href="#ref-for-idl-unrestricted-double①④⑤">(102)</a> <a href="#ref-for-idl-unrestricted-double①④⑥">(103)</a> <a href="#ref-for-idl-unrestricted-double①④⑦">(104)</a> <a href="#ref-for-idl-unrestricted-double①④⑧">(105)</a> <a href="#ref-for-idl-unrestricted-double①④⑨">(106)</a> <a href="#ref-for-idl-unrestricted-double①⑤⓪">(107)</a> <a href="#ref-for-idl-unrestricted-double①⑤①">(108)</a> <a href="#ref-for-idl-unrestricted-double①⑤②">(109)</a> <a href="#ref-for-idl-unrestricted-double①⑤③">(110)</a> <a href="#ref-for-idl-unrestricted-double①⑤④">(111)</a> <a href="#ref-for-idl-unrestricted-double①⑤⑤">(112)</a> <a href="#ref-for-idl-unrestricted-double①⑤⑥">(113)</a> <a href="#ref-for-idl-unrestricted-double①⑤⑦">(114)</a> <a href="#ref-for-idl-unrestricted-double①⑤⑧">(115)</a> <a href="#ref-for-idl-unrestricted-double①⑤⑨">(116)</a> <a href="#ref-for-idl-unrestricted-double①⑥⓪">(117)</a> <a href="#ref-for-idl-unrestricted-double①⑥①">(118)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unsigned-long">
   <a href="https://heycam.github.io/webidl/#idl-unsigned-long">https://heycam.github.io/webidl/#idl-unsigned-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unsigned-long">4. The DOMRectList interface</a> <a href="#ref-for-idl-unsigned-long①">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-transforms-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-transform-function" style="color:initial">&lt;transform-function></span>
     <li><span class="dfn-paneled" id="term-for-funcdef-matrix3d" style="color:initial">matrix3d()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-length-value" style="color:initial">&lt;length></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-absolute-length" style="color:initial">absolute length</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-SYNTAX]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-css-parse-something-according-to-a-css-grammar" style="color:initial">parse</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-TRANSFORMS]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-transform-list" style="color:initial">&lt;transform-list></span>
     <li><span class="dfn-paneled" id="term-for-funcdef-transform-matrix" style="color:initial">matrix()</span>
     <li><span class="dfn-paneled" id="term-for-propdef-transform" style="color:initial">transform</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSSOM-VIEW]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dom-element-getboundingclientrect" style="color:initial">getBoundingClientRect()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[ECMA-262]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-sec-algorithm-conventions" style="color:initial">!</span>
     <li><span class="dfn-paneled" id="term-for-sec-samevaluezero" style="color:initial">samevaluezero</span>
     <li><span class="dfn-paneled" id="term-for-sec-tostring" style="color:initial">tostring</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-serializable" style="color:initial">Serializable</span>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
     <li><span class="dfn-paneled" id="term-for-worker" style="color:initial">Worker</span>
     <li><span class="dfn-paneled" id="term-for-current-global-object" style="color:initial">current global object</span>
     <li><span class="dfn-paneled" id="term-for-deserialization-steps" style="color:initial">deserialization steps</span>
     <li><span class="dfn-paneled" id="term-for-serializable-objects" style="color:initial">serializable objects</span>
     <li><span class="dfn-paneled" id="term-for-serialization-steps" style="color:initial">serialization steps</span>
     <li><span class="dfn-paneled" id="term-for-sub-deserialization" style="color:initial">sub-deserialization</span>
     <li><span class="dfn-paneled" id="term-for-sub-serialization" style="color:initial">sub-serialization</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WEBIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMException" style="color:initial">DOMException</span>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Default" style="color:initial">Default</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-idl-Float32Array" style="color:initial">Float32Array</span>
     <li><span class="dfn-paneled" id="term-for-idl-Float64Array" style="color:initial">Float64Array</span>
     <li><span class="dfn-paneled" id="term-for-indexsizeerror" style="color:initial">IndexSizeError</span>
     <li><span class="dfn-paneled" id="term-for-invalidstateerror" style="color:initial">InvalidStateError</span>
     <li><span class="dfn-paneled" id="term-for-LegacyWindowAlias" style="color:initial">LegacyWindowAlias</span>
     <li><span class="dfn-paneled" id="term-for-NewObject" style="color:initial">NewObject</span>
     <li><span class="dfn-paneled" id="term-for-SameObject" style="color:initial">SameObject</span>
     <li><span class="dfn-paneled" id="term-for-syntaxerror" style="color:initial">SyntaxError</span>
     <li><span class="dfn-paneled" id="term-for-exceptiondef-typeerror" style="color:initial">TypeError</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-idl-object" style="color:initial">object</span>
     <li><span class="dfn-paneled" id="term-for-idl-unrestricted-double" style="color:initial">unrestricted double</span>
     <li><span class="dfn-paneled" id="term-for-idl-unsigned-long" style="color:initial">unsigned long</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-transforms-2">[CSS-TRANSFORMS-2]
   <dd>CSS Transforms Module Level 2 URL: <a href="https://drafts.csswg.org/css-transforms-2/">https://drafts.csswg.org/css-transforms-2/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css3-syntax">[CSS3-SYNTAX]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-css3-transforms">[CSS3-TRANSFORMS]
   <dd>Simon Fraser; et al. <a href="https://www.w3.org/TR/css-transforms-1/">CSS Transforms Module Level 1</a>. 14 February 2019. CR. URL: <a href="https://www.w3.org/TR/css-transforms-1/">https://www.w3.org/TR/css-transforms-1/</a>
   <dt id="biblio-ecma-262">[ECMA-262]
   <dd><a href="https://tc39.github.io/ecma262/">ECMAScript Language Specification</a>. URL: <a href="https://tc39.github.io/ecma262/">https://tc39.github.io/ecma262/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-webidl">[WEBIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-cssom-view">[CSSOM-VIEW]
   <dd>Simon Pieters. <a href="https://www.w3.org/TR/cssom-view-1/">CSSOM View Module</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-view-1/">https://www.w3.org/TR/cssom-view-1/</a>
   <dt id="biblio-svg11">[SVG11]
   <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/">Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①⓪"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable⑦"><c- g>Serializable</c-></a>]
<c- b>interface</c-> <a href="#dompointreadonly"><code><c- g>DOMPointReadOnly</c-></code></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-dompointreadonly-dompointreadonly" id="ref-for-dom-dompointreadonly-dompointreadonly①"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑥③"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dompointreadonly-dompointreadonly-x-y-z-w-x"><code><c- g>x</c-></code></a> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑥②"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dompointreadonly-dompointreadonly-x-y-z-w-y"><code><c- g>y</c-></code></a> = 0,
            <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dompointreadonly-dompointreadonly-x-y-z-w-z"><code><c- g>z</c-></code></a> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dompointreadonly-dompointreadonly-x-y-z-w-w"><code><c- g>w</c-></code></a> = 1);

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject③⓪"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dompointreadonly" id="ref-for-dompointreadonly①③"><c- n>DOMPointReadOnly</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dompointreadonly-frompoint" id="ref-for-dom-dompointreadonly-frompoint①"><c- g>fromPoint</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit①③"><c- n>DOMPointInit</c-></a> <a href="#dom-dompointreadonly-frompoint-other-other"><code><c- g>other</c-></code></a> = {});

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dompointreadonly-x" id="ref-for-dom-dompointreadonly-x③"><c- g>x</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dompointreadonly-y" id="ref-for-dom-dompointreadonly-y③"><c- g>y</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dompointreadonly-z" id="ref-for-dom-dompointreadonly-z③"><c- g>z</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dompointreadonly-w" id="ref-for-dom-dompointreadonly-w③"><c- g>w</c-></a>;

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①①⓪"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dompoint" id="ref-for-dompoint③⑥"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dompointreadonly-matrixtransform" id="ref-for-dom-dompointreadonly-matrixtransform②"><c- g>matrixTransform</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit⑨"><c- n>DOMMatrixInit</c-></a> <a href="#dom-dompointreadonly-matrixtransform-matrix-matrix"><code><c- g>matrix</c-></code></a> = {});

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default④"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object④"><c- b>object</c-></a> <a href="#dom-dompointreadonly-tojson"><code><c- g>toJSON</c-></code></a>();
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable①①"><c- g>Serializable</c-></a>,
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#LegacyWindowAlias" id="ref-for-LegacyWindowAlias③"><c- g>LegacyWindowAlias</c-></a>=<a href="#svgpoint"><code><c- n>SVGPoint</c-></code></a>]
<c- b>interface</c-> <a href="#dompoint"><code><c- g>DOMPoint</c-></code></a> : <a class="n" data-link-type="idl-name" href="#dompointreadonly" id="ref-for-dompointreadonly①④"><c- n>DOMPointReadOnly</c-></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-dompoint-dompoint" id="ref-for-dom-dompoint-dompoint①"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dompoint-dompoint-x-y-z-w-x"><code><c- g>x</c-></code></a> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dompoint-dompoint-x-y-z-w-y"><code><c- g>y</c-></code></a> = 0,
            <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dompoint-dompoint-x-y-z-w-z"><code><c- g>z</c-></code></a> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dompoint-dompoint-x-y-z-w-w"><code><c- g>w</c-></code></a> = 1);

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②①⓪"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dompoint" id="ref-for-dompoint①①⓪"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dompoint-frompoint" id="ref-for-dom-dompoint-frompoint①"><c- g>fromPoint</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit①②"><c- n>DOMPointInit</c-></a> <a href="#dom-dompoint-frompoint-other-other"><code><c- g>other</c-></code></a> = {});

    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dompointreadonly-x" id="ref-for-dom-dompointreadonly-x①①"><c- g>x</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dompointreadonly-y" id="ref-for-dom-dompointreadonly-y①①"><c- g>y</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dompointreadonly-z" id="ref-for-dom-dompointreadonly-z①①"><c- g>z</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dompointreadonly-w" id="ref-for-dom-dompointreadonly-w①①"><c- g>w</c-></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-dompointinit"><code><c- g>DOMPointInit</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑥④"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-dompointinit-x"><code><c- g>x</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-dompointinit-y"><code><c- g>y</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-dompointinit-z"><code><c- g>z</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="1" data-type="unrestricted double " href="#dom-dompointinit-w"><code><c- g>w</c-></code></a> = 1;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable②①"><c- g>Serializable</c-></a>]
<c- b>interface</c-> <a href="#domrectreadonly"><code><c- g>DOMRectReadOnly</c-></code></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-domrectreadonly-domrectreadonly" id="ref-for-dom-domrectreadonly-domrectreadonly①"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-domrectreadonly-domrectreadonly-x-y-width-height-x"><code><c- g>x</c-></code></a> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-domrectreadonly-domrectreadonly-x-y-width-height-y"><code><c- g>y</c-></code></a> = 0,
            <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-domrectreadonly-domrectreadonly-x-y-width-height-width"><code><c- g>width</c-></code></a> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-domrectreadonly-domrectreadonly-x-y-width-height-height"><code><c- g>height</c-></code></a> = 0);

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject③①"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#domrectreadonly" id="ref-for-domrectreadonly①③"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="method" href="#dom-domrectreadonly-fromrect" id="ref-for-dom-domrectreadonly-fromrect①"><c- g>fromRect</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-domrectinit" id="ref-for-dictdef-domrectinit③"><c- n>DOMRectInit</c-></a> <a href="#dom-domrectreadonly-fromrect-other-other"><code><c- g>other</c-></code></a> = {});

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-readonly data-type="unrestricted double" href="#dom-domrectreadonly-x"><code><c- g>x</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-readonly data-type="unrestricted double" href="#dom-domrectreadonly-y"><code><c- g>y</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-readonly data-type="unrestricted double" href="#dom-domrectreadonly-width"><code><c- g>width</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-readonly data-type="unrestricted double" href="#dom-domrectreadonly-height"><code><c- g>height</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-readonly data-type="unrestricted double" href="#dom-domrectreadonly-top"><code><c- g>top</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-readonly data-type="unrestricted double" href="#dom-domrectreadonly-right"><code><c- g>right</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-readonly data-type="unrestricted double" href="#dom-domrectreadonly-bottom"><code><c- g>bottom</c-></code></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-readonly data-type="unrestricted double" href="#dom-domrectreadonly-left"><code><c- g>left</c-></code></a>;

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default①①"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object①①"><c- b>object</c-></a> <a href="#dom-domrectreadonly-tojson"><code><c- g>toJSON</c-></code></a>();
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③①"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable③①"><c- g>Serializable</c-></a>,
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#LegacyWindowAlias" id="ref-for-LegacyWindowAlias①①"><c- g>LegacyWindowAlias</c-></a>=<a href="#svgrect"><code><c- n>SVGRect</c-></code></a>]
<c- b>interface</c-> <a href="#domrect"><code><c- g>DOMRect</c-></code></a> : <a class="n" data-link-type="idl-name" href="#domrectreadonly" id="ref-for-domrectreadonly②①"><c- n>DOMRectReadOnly</c-></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-domrect-domrect" id="ref-for-dom-domrect-domrect①"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-domrect-domrect-x-y-width-height-x"><code><c- g>x</c-></code></a> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-domrect-domrect-x-y-width-height-y"><code><c- g>y</c-></code></a> = 0,
            <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-domrect-domrect-x-y-width-height-width"><code><c- g>width</c-></code></a> = 0, <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-domrect-domrect-x-y-width-height-height"><code><c- g>height</c-></code></a> = 0);

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject④①"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#domrect" id="ref-for-domrect②①"><c- n>DOMRect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-domrect-fromrect" id="ref-for-dom-domrect-fromrect①"><c- g>fromRect</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-domrectinit" id="ref-for-dictdef-domrectinit①①"><c- n>DOMRectInit</c-></a> <a href="#dom-domrect-fromrect-other-other"><code><c- g>other</c-></code></a> = {});

    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double" href="#dom-domrect-x"><code><c- g>x</c-></code></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double" href="#dom-domrect-y"><code><c- g>y</c-></code></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double" href="#dom-domrect-width"><code><c- g>width</c-></code></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double" href="#dom-domrect-height"><code><c- g>height</c-></code></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-domrectinit"><code><c- g>DOMRectInit</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-domrectinit-x"><code><c- g>x</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-domrectinit-y"><code><c- g>y</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-domrectinit-width"><code><c- g>width</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-domrectinit-height"><code><c- g>height</c-></code></a> = 0;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed④①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#domrectlist"><code><c- g>DOMRectList</c-></code></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long②"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-domrectlist-length" id="ref-for-dom-domrectlist-length①"><c- g>length</c-></a>;
    <c- b>getter</c-> <a class="n" data-link-type="idl-name" href="#domrect" id="ref-for-domrect⑨①"><c- n>DOMRect</c-></a>? <a class="idl-code" data-link-type="method" href="#dom-domrectlist-item" id="ref-for-dom-domrectlist-item①"><c- g>item</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①①"><c- b>unsigned</c-> <c- b>long</c-></a> <a href="#dom-domrectlist-item-index-index"><code><c- g>index</c-></code></a>);
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑤①"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable④①"><c- g>Serializable</c-></a>]
<c- b>interface</c-> <a href="#domquad"><code><c- g>DOMQuad</c-></code></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-domquad-domquad" id="ref-for-dom-domquad-domquad①"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit②①"><c- n>DOMPointInit</c-></a> <a href="#dom-domquad-domquad-p1-p2-p3-p4-p1"><code><c- g>p1</c-></code></a> = {}, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit③①"><c- n>DOMPointInit</c-></a> <a href="#dom-domquad-domquad-p1-p2-p3-p4-p2"><code><c- g>p2</c-></code></a> = {},
            <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit④①"><c- n>DOMPointInit</c-></a> <a href="#dom-domquad-domquad-p1-p2-p3-p4-p3"><code><c- g>p3</c-></code></a> = {}, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit⑤①"><c- n>DOMPointInit</c-></a> <a href="#dom-domquad-domquad-p1-p2-p3-p4-p4"><code><c- g>p4</c-></code></a> = {});

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject⑤①"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#domquad" id="ref-for-domquad①①⓪"><c- n>DOMQuad</c-></a> <a class="idl-code" data-link-type="method" href="#dom-domquad-fromrect" id="ref-for-dom-domquad-fromrect①"><c- g>fromRect</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-domrectinit" id="ref-for-dictdef-domrectinit②①"><c- n>DOMRectInit</c-></a> <a href="#dom-domquad-fromrect-other-other"><code><c- g>other</c-></code></a> = {});
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject⑥①"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#domquad" id="ref-for-domquad②①"><c- n>DOMQuad</c-></a> <a class="idl-code" data-link-type="method" href="#dom-domquad-fromquad" id="ref-for-dom-domquad-fromquad①"><c- g>fromQuad</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-domquadinit" id="ref-for-dictdef-domquadinit①"><c- n>DOMQuadInit</c-></a> <a href="#dom-domquad-fromquad-other-other"><code><c- g>other</c-></code></a> = {});

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject④"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#dompoint" id="ref-for-dompoint①④①"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMPoint" href="#dom-domquad-p1" id="ref-for-dom-domquad-p1②"><c- g>p1</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#dompoint" id="ref-for-dompoint①⑤①"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMPoint" href="#dom-domquad-p2" id="ref-for-dom-domquad-p2①"><c- g>p2</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject②①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#dompoint" id="ref-for-dompoint①⑥①"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMPoint" href="#dom-domquad-p3" id="ref-for-dom-domquad-p3①"><c- g>p3</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject③①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#dompoint" id="ref-for-dompoint①⑦①"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMPoint" href="#dom-domquad-p4" id="ref-for-dom-domquad-p4②"><c- g>p4</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject⑦①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#domrect" id="ref-for-domrect①③①"><c- n>DOMRect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-domquad-getbounds" id="ref-for-dom-domquad-getbounds③"><c- g>getBounds</c-></a>();

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default②①"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object②①"><c- b>object</c-></a> <a href="#dom-domquad-tojson"><code><c- g>toJSON</c-></code></a>();
};

<c- b>dictionary</c-> <a href="#dictdef-domquadinit"><code><c- g>DOMQuadInit</c-></code></a> {
  <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit⑥①"><c- n>DOMPointInit</c-></a> <a data-type="DOMPointInit " href="#dom-domquadinit-p1"><code><c- g>p1</c-></code></a>;
  <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit⑦①"><c- n>DOMPointInit</c-></a> <a data-type="DOMPointInit " href="#dom-domquadinit-p2"><code><c- g>p2</c-></code></a>;
  <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit⑧①"><c- n>DOMPointInit</c-></a> <a data-type="DOMPointInit " href="#dom-domquadinit-p3"><code><c- g>p3</c-></code></a>;
  <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit⑨①"><c- n>DOMPointInit</c-></a> <a data-type="DOMPointInit " href="#dom-domquadinit-p4"><code><c- g>p4</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑥①"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable⑤①"><c- g>Serializable</c-></a>]
<c- b>interface</c-> <a href="#dommatrixreadonly"><code><c- g>DOMMatrixReadOnly</c-></code></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-dommatrixreadonly-dommatrixreadonly" id="ref-for-dom-dommatrixreadonly-dommatrixreadonly①"><c- g>constructor</c-></a>(<c- b>optional</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤"><c- b>DOMString</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④④①"><c- b>unrestricted</c-> <c- b>double</c-></a>>) <a href="#dom-dommatrixreadonly-dommatrixreadonly-init-init"><code><c- g>init</c-></code></a>);

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject⑧①"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly①①⓪"><c- n>DOMMatrixReadOnly</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-frommatrix" id="ref-for-dom-dommatrixreadonly-frommatrix①"><c- g>fromMatrix</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit①①"><c- n>DOMMatrixInit</c-></a> <a href="#dom-dommatrixreadonly-frommatrix-other-other"><code><c- g>other</c-></code></a> = {});
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject⑨①"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly②①⓪"><c- n>DOMMatrixReadOnly</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-fromfloat32array" id="ref-for-dom-dommatrixreadonly-fromfloat32array①"><c- g>fromFloat32Array</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array④"><c- b>Float32Array</c-></a> <a href="#dom-dommatrixreadonly-fromfloat32array-array32-array32"><code><c- g>array32</c-></code></a>);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①⓪①"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly③①⓪"><c- n>DOMMatrixReadOnly</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-fromfloat64array" id="ref-for-dom-dommatrixreadonly-fromfloat64array①"><c- g>fromFloat64Array</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float64Array" id="ref-for-idl-Float64Array④"><c- b>Float64Array</c-></a> <a href="#dom-dommatrixreadonly-fromfloat64array-array64-array64"><code><c- g>array64</c-></code></a>);

    // These attributes are simple aliases for certain elements of the 4x4 matrix
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-a" id="ref-for-dom-dommatrixreadonly-a⑤"><c- g>a</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-b" id="ref-for-dom-dommatrixreadonly-b④"><c- g>b</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-c" id="ref-for-dom-dommatrixreadonly-c④"><c- g>c</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-d" id="ref-for-dom-dommatrixreadonly-d④"><c- g>d</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-e" id="ref-for-dom-dommatrixreadonly-e④"><c- g>e</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-f" id="ref-for-dom-dommatrixreadonly-f⑤"><c- g>f</c-></a>;

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m11" id="ref-for-dom-dommatrixreadonly-m11⑧"><c- g>m11</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m12" id="ref-for-dom-dommatrixreadonly-m12④"><c- g>m12</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m13" id="ref-for-dom-dommatrixreadonly-m13③"><c- g>m13</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m14" id="ref-for-dom-dommatrixreadonly-m14③"><c- g>m14</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m21" id="ref-for-dom-dommatrixreadonly-m21④"><c- g>m21</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m22" id="ref-for-dom-dommatrixreadonly-m22⑤"><c- g>m22</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m23" id="ref-for-dom-dommatrixreadonly-m23③"><c- g>m23</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m24" id="ref-for-dom-dommatrixreadonly-m24③"><c- g>m24</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m31" id="ref-for-dom-dommatrixreadonly-m31③"><c- g>m31</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m32" id="ref-for-dom-dommatrixreadonly-m32③"><c- g>m32</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m33" id="ref-for-dom-dommatrixreadonly-m33④"><c- g>m33</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m34" id="ref-for-dom-dommatrixreadonly-m34③"><c- g>m34</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m41" id="ref-for-dom-dommatrixreadonly-m41④"><c- g>m41</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m42" id="ref-for-dom-dommatrixreadonly-m42④"><c- g>m42</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m43" id="ref-for-dom-dommatrixreadonly-m43③"><c- g>m43</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unrestricted double" href="#dom-dommatrixreadonly-m44" id="ref-for-dom-dommatrixreadonly-m44⑥"><c- g>m44</c-></a>;

    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean③"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-dommatrixreadonly-is2d" id="ref-for-dom-dommatrixreadonly-is2d③"><c- g>is2D</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-dommatrixreadonly-isidentity" id="ref-for-dom-dommatrixreadonly-isidentity②"><c- g>isIdentity</c-></a>;

    // Immutable transform methods
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①①①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②①⓪"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-translate" id="ref-for-dom-dommatrixreadonly-translate①"><c- g>translate</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-translate-tx-ty-tz-tx"><code><c- g>tx</c-></code></a> = 0,
                                    <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-translate-tx-ty-tz-ty"><code><c- g>ty</c-></code></a> = 0,
                                    <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-translate-tx-ty-tz-tz"><code><c- g>tz</c-></code></a> = 0);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①②①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix③①⓪"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-scale" id="ref-for-dom-dommatrixreadonly-scale③"><c- g>scale</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-scalex"><code><c- g>scaleX</c-></code></a> = 1,
                                <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-scaley"><code><c- g>scaleY</c-></code></a>,
                                <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-scalez"><code><c- g>scaleZ</c-></code></a> = 1,
                                <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-originx"><code><c- g>originX</c-></code></a> = 0,
                                <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-originy"><code><c- g>originY</c-></code></a> = 0,
                                <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-scale-scalex-scaley-scalez-originx-originy-originz-originz"><code><c- g>originZ</c-></code></a> = 0);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①③①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix④①⓪"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-scalenonuniform" id="ref-for-dom-dommatrixreadonly-scalenonuniform①"><c- g>scaleNonUniform</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-scalenonuniform-scalex-scaley-scalex"><code><c- g>scaleX</c-></code></a> = 1,
                                          <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-scalenonuniform-scalex-scaley-scaley"><code><c- g>scaleY</c-></code></a> = 1);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①④①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix⑤①⓪"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-scale3d" id="ref-for-dom-dommatrixreadonly-scale3d①"><c- g>scale3d</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-scale3d-scale-originx-originy-originz-scale"><code><c- g>scale</c-></code></a> = 1,
                                  <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-scale3d-scale-originx-originy-originz-originx"><code><c- g>originX</c-></code></a> = 0,
                                  <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-scale3d-scale-originx-originy-originz-originy"><code><c- g>originY</c-></code></a> = 0,
                                  <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-scale3d-scale-originx-originy-originz-originz"><code><c- g>originZ</c-></code></a> = 0);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①⑤①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix⑥①⓪"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-rotate" id="ref-for-dom-dommatrixreadonly-rotate②"><c- g>rotate</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-rotate-rotx-roty-rotz-rotx"><code><c- g>rotX</c-></code></a> = 0,
                                 <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-rotate-rotx-roty-rotz-roty"><code><c- g>rotY</c-></code></a>,
                                 <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-rotate-rotx-roty-rotz-rotz"><code><c- g>rotZ</c-></code></a>);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①⑥①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix⑦①⓪"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-rotatefromvector" id="ref-for-dom-dommatrixreadonly-rotatefromvector①"><c- g>rotateFromVector</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-rotatefromvector-x-y-x"><code><c- g>x</c-></code></a> = 0,
                                           <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-rotatefromvector-x-y-y"><code><c- g>y</c-></code></a> = 0);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①⑦①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix⑧②"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-rotateaxisangle" id="ref-for-dom-dommatrixreadonly-rotateaxisangle①"><c- g>rotateAxisAngle</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-rotateaxisangle-x-y-z-angle-x"><code><c- g>x</c-></code></a> = 0,
                                          <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-rotateaxisangle-x-y-z-angle-y"><code><c- g>y</c-></code></a> = 0,
                                          <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-rotateaxisangle-x-y-z-angle-z"><code><c- g>z</c-></code></a> = 0,
                                          <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-rotateaxisangle-x-y-z-angle-angle"><code><c- g>angle</c-></code></a> = 0);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①⑧①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix⑨①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-skewx" id="ref-for-dom-dommatrixreadonly-skewx①"><c- g>skewX</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-skewx-sx-sx"><code><c- g>sx</c-></code></a> = 0);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①⑨①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①⓪①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-skewy" id="ref-for-dom-dommatrixreadonly-skewy①"><c- g>skewY</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrixreadonly-skewy-sy-sy"><code><c- g>sy</c-></code></a> = 0);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②⓪①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①①①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-multiply" id="ref-for-dom-dommatrixreadonly-multiply①"><c- g>multiply</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit②①"><c- n>DOMMatrixInit</c-></a> <a href="#dom-dommatrixreadonly-multiply-other-other"><code><c- g>other</c-></code></a> = {});
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②①①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①②①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-flipx" id="ref-for-dom-dommatrixreadonly-flipx①"><c- g>flipX</c-></a>();
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②②①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①③①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-flipy" id="ref-for-dom-dommatrixreadonly-flipy①"><c- g>flipY</c-></a>();
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②③①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①④①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-inverse" id="ref-for-dom-dommatrixreadonly-inverse②"><c- g>inverse</c-></a>();

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②④①"><c- g>NewObject</c-></a>] <a class="n" data-link-type="idl-name" href="#dompoint" id="ref-for-dompoint③①①"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-transformpoint" id="ref-for-dom-dommatrixreadonly-transformpoint①"><c- g>transformPoint</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dompointinit" id="ref-for-dictdef-dompointinit①①①"><c- n>DOMPointInit</c-></a> <a href="#dom-dommatrixreadonly-transformpoint-point-point"><code><c- g>point</c-></code></a> = {});
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②⑤①"><c- g>NewObject</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array①①"><c- b>Float32Array</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-tofloat32array" id="ref-for-dom-dommatrixreadonly-tofloat32array①"><c- g>toFloat32Array</c-></a>();
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②⑥①"><c- g>NewObject</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float64Array" id="ref-for-idl-Float64Array①①"><c- b>Float64Array</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrixreadonly-tofloat64array" id="ref-for-dom-dommatrixreadonly-tofloat64array①"><c- g>toFloat64Array</c-></a>();

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑦①"><c- g>Exposed</c-></a>=<c- n>Window</c->] <a data-link-type="dfn" href="#dommatrixreadonly-stringification-behavior" id="ref-for-dommatrixreadonly-stringification-behavior①"><c- b>stringifier</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default③①"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object③①"><c- b>object</c-></a> <a href="#dom-dommatrixreadonly-tojson"><code><c- g>toJSON</c-></code></a>();
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑧①"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable⑥①"><c- g>Serializable</c-></a>,
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#LegacyWindowAlias" id="ref-for-LegacyWindowAlias②①"><c- g>LegacyWindowAlias</c-></a>=(<a href="#svgmatrix"><code><c- n>SVGMatrix</c-></code></a>,<a href="#webkitcssmatrix"><code><c- n>WebKitCSSMatrix</c-></code></a>)]
<c- b>interface</c-> <a href="#dommatrix"><code><c- g>DOMMatrix</c-></code></a> : <a class="n" data-link-type="idl-name" href="#dommatrixreadonly" id="ref-for-dommatrixreadonly④①"><c- n>DOMMatrixReadOnly</c-></a> {
    <a class="idl-code" data-link-type="constructor" href="#dom-dommatrix-dommatrix" id="ref-for-dom-dommatrix-dommatrix①"><c- g>constructor</c-></a>(<c- b>optional</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨③①"><c- b>unrestricted</c-> <c- b>double</c-></a>>) <a href="#dom-dommatrix-dommatrix-init-init"><code><c- g>init</c-></code></a>);

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②⑦①"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①⑤①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-frommatrix" id="ref-for-dom-dommatrix-frommatrix①"><c- g>fromMatrix</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit③①"><c- n>DOMMatrixInit</c-></a> <a href="#dom-dommatrix-frommatrix-other-other"><code><c- g>other</c-></code></a> = {});
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②⑧①"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①⑥①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-fromfloat32array" id="ref-for-dom-dommatrix-fromfloat32array①"><c- g>fromFloat32Array</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float32Array" id="ref-for-idl-Float32Array②①"><c- b>Float32Array</c-></a> <a href="#dom-dommatrix-fromfloat32array-array32-array32"><code><c- g>array32</c-></code></a>);
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject②⑨①"><c- g>NewObject</c-></a>] <c- b>static</c-> <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①⑦①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-fromfloat64array" id="ref-for-dom-dommatrix-fromfloat64array①"><c- g>fromFloat64Array</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-Float64Array" id="ref-for-idl-Float64Array②①"><c- b>Float64Array</c-></a> <a href="#dom-dommatrix-fromfloat64array-array64-array64"><code><c- g>array64</c-></code></a>);

    // These attributes are simple aliases for certain elements of the 4x4 matrix
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-a" id="ref-for-dom-dommatrixreadonly-a①①"><c- g>a</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-b" id="ref-for-dom-dommatrixreadonly-b①①"><c- g>b</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-c" id="ref-for-dom-dommatrixreadonly-c①①"><c- g>c</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-d" id="ref-for-dom-dommatrixreadonly-d①①"><c- g>d</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-e" id="ref-for-dom-dommatrixreadonly-e①①"><c- g>e</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-f" id="ref-for-dom-dommatrixreadonly-f①①"><c- g>f</c-></a>;

    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m11" id="ref-for-dom-dommatrixreadonly-m11①①"><c- g>m11</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m12" id="ref-for-dom-dommatrixreadonly-m12①①"><c- g>m12</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m13" id="ref-for-dom-dommatrixreadonly-m13①①"><c- g>m13</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m14" id="ref-for-dom-dommatrixreadonly-m14①①"><c- g>m14</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m21" id="ref-for-dom-dommatrixreadonly-m21①①"><c- g>m21</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m22" id="ref-for-dom-dommatrixreadonly-m22①①"><c- g>m22</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m23" id="ref-for-dom-dommatrixreadonly-m23①①"><c- g>m23</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m24" id="ref-for-dom-dommatrixreadonly-m24①①"><c- g>m24</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m31" id="ref-for-dom-dommatrixreadonly-m31①①"><c- g>m31</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m32" id="ref-for-dom-dommatrixreadonly-m32①①"><c- g>m32</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m33" id="ref-for-dom-dommatrixreadonly-m33①①"><c- g>m33</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m34" id="ref-for-dom-dommatrixreadonly-m34①①"><c- g>m34</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m41" id="ref-for-dom-dommatrixreadonly-m41①①"><c- g>m41</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m42" id="ref-for-dom-dommatrixreadonly-m42①①"><c- g>m42</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m43" id="ref-for-dom-dommatrixreadonly-m43①①"><c- g>m43</c-></a>;
    <c- b>inherit</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-dommatrixreadonly-m44" id="ref-for-dom-dommatrixreadonly-m44①①"><c- g>m44</c-></a>;

    // Mutable transform methods
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①⑧①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-multiplyself" id="ref-for-dom-dommatrix-multiplyself②"><c- g>multiplySelf</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit④①"><c- n>DOMMatrixInit</c-></a> <a href="#dom-dommatrix-multiplyself-other-other"><code><c- g>other</c-></code></a> = {});
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix①⑨①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-premultiplyself" id="ref-for-dom-dommatrix-premultiplyself①"><c- g>preMultiplySelf</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-dommatrixinit" id="ref-for-dictdef-dommatrixinit⑤①"><c- n>DOMMatrixInit</c-></a> <a href="#dom-dommatrix-premultiplyself-other-other"><code><c- g>other</c-></code></a> = {});
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②⓪①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-translateself" id="ref-for-dom-dommatrix-translateself⑦"><c- g>translateSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-translateself-tx-ty-tz-tx"><code><c- g>tx</c-></code></a> = 0,
                            <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-translateself-tx-ty-tz-ty"><code><c- g>ty</c-></code></a> = 0,
                            <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-translateself-tx-ty-tz-tz"><code><c- g>tz</c-></code></a> = 0);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②①①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-scaleself" id="ref-for-dom-dommatrix-scaleself④"><c- g>scaleSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-scalex"><code><c- g>scaleX</c-></code></a> = 1,
                        <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-scaley"><code><c- g>scaleY</c-></code></a>,
                        <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-scalez"><code><c- g>scaleZ</c-></code></a> = 1,
                        <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-originx"><code><c- g>originX</c-></code></a> = 0,
                        <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-originy"><code><c- g>originY</c-></code></a> = 0,
                        <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-scaleself-scalex-scaley-scalez-originx-originy-originz-originz"><code><c- g>originZ</c-></code></a> = 0);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②②①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-scale3dself" id="ref-for-dom-dommatrix-scale3dself②"><c- g>scale3dSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-scale3dself-scale-originx-originy-originz-scale"><code><c- g>scale</c-></code></a> = 1,
                          <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-scale3dself-scale-originx-originy-originz-originx"><code><c- g>originX</c-></code></a> = 0,
                          <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-scale3dself-scale-originx-originy-originz-originy"><code><c- g>originY</c-></code></a> = 0,
                          <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-scale3dself-scale-originx-originy-originz-originz"><code><c- g>originZ</c-></code></a> = 0);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②③①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-rotateself" id="ref-for-dom-dommatrix-rotateself③"><c- g>rotateSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-rotateself-rotx-roty-rotz-rotx"><code><c- g>rotX</c-></code></a> = 0,
                         <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-rotateself-rotx-roty-rotz-roty"><code><c- g>rotY</c-></code></a>,
                         <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-rotateself-rotx-roty-rotz-rotz"><code><c- g>rotZ</c-></code></a>);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②④①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-rotatefromvectorself" id="ref-for-dom-dommatrix-rotatefromvectorself②"><c- g>rotateFromVectorSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-rotatefromvectorself-x-y-x"><code><c- g>x</c-></code></a> = 0,
                                   <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-rotatefromvectorself-x-y-y"><code><c- g>y</c-></code></a> = 0);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②⑤①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-rotateaxisangleself" id="ref-for-dom-dommatrix-rotateaxisangleself②"><c- g>rotateAxisAngleSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-rotateaxisangleself-x-y-z-angle-x"><code><c- g>x</c-></code></a> = 0,
                                  <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-rotateaxisangleself-x-y-z-angle-y"><code><c- g>y</c-></code></a> = 0,
                                  <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-rotateaxisangleself-x-y-z-angle-z"><code><c- g>z</c-></code></a> = 0,
                                  <c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-rotateaxisangleself-x-y-z-angle-angle"><code><c- g>angle</c-></code></a> = 0);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②⑥①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-skewxself" id="ref-for-dom-dommatrix-skewxself②"><c- g>skewXSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-skewxself-sx-sx"><code><c- g>sx</c-></code></a> = 0);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②⑦①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-skewyself" id="ref-for-dom-dommatrix-skewyself②"><c- g>skewYSelf</c-></a>(<c- b>optional</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-dommatrix-skewyself-sy-sy"><code><c- g>sy</c-></code></a> = 0);
    <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②⑧①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-invertself" id="ref-for-dom-dommatrix-invertself④"><c- g>invertSelf</c-></a>();

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑨①"><c- g>Exposed</c-></a>=<c- n>Window</c->] <a class="n" data-link-type="idl-name" href="#dommatrix" id="ref-for-dommatrix②⑨①"><c- n>DOMMatrix</c-></a> <a class="idl-code" data-link-type="method" href="#dom-dommatrix-setmatrixvalue" id="ref-for-dom-dommatrix-setmatrixvalue④"><c- g>setMatrixValue</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a> <a href="#dom-dommatrix-setmatrixvalue-transformlist-transformlist"><code><c- g>transformList</c-></code></a>);
};

<c- b>dictionary</c-> <a href="#dictdef-dommatrix2dinit"><code><c- g>DOMMatrix2DInit</c-></code></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double " href="#dom-dommatrix2dinit-a"><code><c- g>a</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double " href="#dom-dommatrix2dinit-b"><code><c- g>b</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double " href="#dom-dommatrix2dinit-c"><code><c- g>c</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double " href="#dom-dommatrix2dinit-d"><code><c- g>d</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double " href="#dom-dommatrix2dinit-e"><code><c- g>e</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double " href="#dom-dommatrix2dinit-f"><code><c- g>f</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double " href="#dom-dommatrix2dinit-m11"><code><c- g>m11</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double " href="#dom-dommatrix2dinit-m12"><code><c- g>m12</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double " href="#dom-dommatrix2dinit-m21"><code><c- g>m21</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double " href="#dom-dommatrix2dinit-m22"><code><c- g>m22</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double " href="#dom-dommatrix2dinit-m41"><code><c- g>m41</c-></code></a>;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double " href="#dom-dommatrix2dinit-m42"><code><c- g>m42</c-></code></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-dommatrixinit"><code><c- g>DOMMatrixInit</c-></code></a> : <a class="n" data-link-type="idl-name" href="#dictdef-dommatrix2dinit" id="ref-for-dictdef-dommatrix2dinit②"><c- n>DOMMatrix2DInit</c-></a> {
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤②①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-dommatrixinit-m13"><code><c- g>m13</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤③①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-dommatrixinit-m14"><code><c- g>m14</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤④①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-dommatrixinit-m23"><code><c- g>m23</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤⑤①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-dommatrixinit-m24"><code><c- g>m24</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤⑥①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-dommatrixinit-m31"><code><c- g>m31</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤⑦①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-dommatrixinit-m32"><code><c- g>m32</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤⑧①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="1" data-type="unrestricted double " href="#dom-dommatrixinit-m33"><code><c- g>m33</c-></code></a> = 1;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤⑨①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-dommatrixinit-m34"><code><c- g>m34</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑥⓪①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="0" data-type="unrestricted double " href="#dom-dommatrixinit-m43"><code><c- g>m43</c-></code></a> = 0;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑥①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-default="1" data-type="unrestricted double " href="#dom-dommatrixinit-m44"><code><c- g>m44</c-></code></a> = 1;
    <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②①"><c- b>boolean</c-></a> <a data-type="boolean " href="#dom-dommatrixinit-is2d"><code><c- g>is2D</c-></code></a>;
};

</pre>
  <aside class="dfn-panel" data-for="point">
   <b><a href="#point">#point</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-point">2.1. Transforming a point with a matrix</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dompointreadonly">
   <b><a href="#dompointreadonly">#dompointreadonly</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dompointreadonly">2. The DOMPoint interfaces</a> <a href="#ref-for-dompointreadonly①">(2)</a> <a href="#ref-for-dompointreadonly②">(3)</a> <a href="#ref-for-dompointreadonly③">(4)</a> <a href="#ref-for-dompointreadonly④">(5)</a> <a href="#ref-for-dompointreadonly⑤">(6)</a> <a href="#ref-for-dompointreadonly⑥">(7)</a> <a href="#ref-for-dompointreadonly⑦">(8)</a>
    <li><a href="#ref-for-dompointreadonly⑧">5. The DOMQuad interface</a>
    <li><a href="#ref-for-dompointreadonly⑨">7. Structured serialization</a> <a href="#ref-for-dompointreadonly①⓪">(2)</a>
    <li><a href="#ref-for-dompointreadonly①①">Changes since last publication</a> <a href="#ref-for-dompointreadonly①②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="svgpoint">
   <b><a href="#svgpoint">#svgpoint</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-svgpoint">1. Introduction</a>
    <li><a href="#ref-for-svgpoint①">9.2. SVG</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dompoint">
   <b><a href="#dompoint">#dompoint</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dompoint">2. The DOMPoint interfaces</a> <a href="#ref-for-dompoint①">(2)</a> <a href="#ref-for-dompoint②">(3)</a> <a href="#ref-for-dompoint③">(4)</a> <a href="#ref-for-dompoint④">(5)</a> <a href="#ref-for-dompoint⑤">(6)</a> <a href="#ref-for-dompoint⑥">(7)</a> <a href="#ref-for-dompoint⑦">(8)</a> <a href="#ref-for-dompoint⑧">(9)</a> <a href="#ref-for-dompoint⑨">(10)</a> <a href="#ref-for-dompoint①⓪">(11)</a> <a href="#ref-for-dompoint①①">(12)</a> <a href="#ref-for-dompoint①②">(13)</a>
    <li><a href="#ref-for-dompoint①③">2.1. Transforming a point with a matrix</a>
    <li><a href="#ref-for-dompoint①④">5. The DOMQuad interface</a> <a href="#ref-for-dompoint①⑤">(2)</a> <a href="#ref-for-dompoint①⑥">(3)</a> <a href="#ref-for-dompoint①⑦">(4)</a> <a href="#ref-for-dompoint①⑧">(5)</a> <a href="#ref-for-dompoint①⑨">(6)</a> <a href="#ref-for-dompoint②⓪">(7)</a> <a href="#ref-for-dompoint②①">(8)</a> <a href="#ref-for-dompoint②②">(9)</a> <a href="#ref-for-dompoint②③">(10)</a> <a href="#ref-for-dompoint②④">(11)</a> <a href="#ref-for-dompoint②⑤">(12)</a> <a href="#ref-for-dompoint②⑥">(13)</a> <a href="#ref-for-dompoint②⑦">(14)</a> <a href="#ref-for-dompoint②⑧">(15)</a> <a href="#ref-for-dompoint②⑨">(16)</a> <a href="#ref-for-dompoint③⓪">(17)</a>
    <li><a href="#ref-for-dompoint③①">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dompoint③②">7. Structured serialization</a> <a href="#ref-for-dompoint③③">(2)</a>
    <li><a href="#ref-for-dompoint③④">9.2. SVG</a>
    <li><a href="#ref-for-dompoint③⑤">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-dompointinit">
   <b><a href="#dictdef-dompointinit">#dictdef-dompointinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-dompointinit">2. The DOMPoint interfaces</a> <a href="#ref-for-dictdef-dompointinit①">(2)</a>
    <li><a href="#ref-for-dictdef-dompointinit②">5. The DOMQuad interface</a> <a href="#ref-for-dictdef-dompointinit③">(2)</a> <a href="#ref-for-dictdef-dompointinit④">(3)</a> <a href="#ref-for-dictdef-dompointinit⑤">(4)</a> <a href="#ref-for-dictdef-dompointinit⑥">(5)</a> <a href="#ref-for-dictdef-dompointinit⑦">(6)</a> <a href="#ref-for-dictdef-dompointinit⑧">(7)</a> <a href="#ref-for-dictdef-dompointinit⑨">(8)</a> <a href="#ref-for-dictdef-dompointinit①⓪">(9)</a>
    <li><a href="#ref-for-dictdef-dompointinit①①">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dompointinit-x">
   <b><a href="#dom-dompointinit-x">#dom-dompointinit-x</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dompointinit-x">2. The DOMPoint interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dompointinit-y">
   <b><a href="#dom-dompointinit-y">#dom-dompointinit-y</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dompointinit-y">2. The DOMPoint interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dompointinit-z">
   <b><a href="#dom-dompointinit-z">#dom-dompointinit-z</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dompointinit-z">2. The DOMPoint interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dompointinit-w">
   <b><a href="#dom-dompointinit-w">#dom-dompointinit-w</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dompointinit-w">2. The DOMPoint interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="point-x-coordinate">
   <b><a href="#point-x-coordinate">#point-x-coordinate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-point-x-coordinate">2. The DOMPoint interfaces</a> <a href="#ref-for-point-x-coordinate①">(2)</a> <a href="#ref-for-point-x-coordinate②">(3)</a> <a href="#ref-for-point-x-coordinate③">(4)</a> <a href="#ref-for-point-x-coordinate④">(5)</a> <a href="#ref-for-point-x-coordinate⑤">(6)</a>
    <li><a href="#ref-for-point-x-coordinate⑥">2.1. Transforming a point with a matrix</a> <a href="#ref-for-point-x-coordinate⑦">(2)</a>
    <li><a href="#ref-for-point-x-coordinate⑧">5. The DOMQuad interface</a> <a href="#ref-for-point-x-coordinate⑨">(2)</a> <a href="#ref-for-point-x-coordinate①⓪">(3)</a> <a href="#ref-for-point-x-coordinate①①">(4)</a> <a href="#ref-for-point-x-coordinate①②">(5)</a> <a href="#ref-for-point-x-coordinate①③">(6)</a> <a href="#ref-for-point-x-coordinate①④">(7)</a> <a href="#ref-for-point-x-coordinate①⑤">(8)</a> <a href="#ref-for-point-x-coordinate①⑥">(9)</a> <a href="#ref-for-point-x-coordinate①⑦">(10)</a> <a href="#ref-for-point-x-coordinate①⑧">(11)</a> <a href="#ref-for-point-x-coordinate①⑨">(12)</a>
    <li><a href="#ref-for-point-x-coordinate②⓪">7. Structured serialization</a> <a href="#ref-for-point-x-coordinate②①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="point-y-coordinate">
   <b><a href="#point-y-coordinate">#point-y-coordinate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-point-y-coordinate">2. The DOMPoint interfaces</a> <a href="#ref-for-point-y-coordinate①">(2)</a> <a href="#ref-for-point-y-coordinate②">(3)</a> <a href="#ref-for-point-y-coordinate③">(4)</a> <a href="#ref-for-point-y-coordinate④">(5)</a> <a href="#ref-for-point-y-coordinate⑤">(6)</a>
    <li><a href="#ref-for-point-y-coordinate⑥">2.1. Transforming a point with a matrix</a> <a href="#ref-for-point-y-coordinate⑦">(2)</a>
    <li><a href="#ref-for-point-y-coordinate⑧">5. The DOMQuad interface</a> <a href="#ref-for-point-y-coordinate⑨">(2)</a> <a href="#ref-for-point-y-coordinate①⓪">(3)</a> <a href="#ref-for-point-y-coordinate①①">(4)</a> <a href="#ref-for-point-y-coordinate①②">(5)</a> <a href="#ref-for-point-y-coordinate①③">(6)</a> <a href="#ref-for-point-y-coordinate①④">(7)</a> <a href="#ref-for-point-y-coordinate①⑤">(8)</a> <a href="#ref-for-point-y-coordinate①⑥">(9)</a> <a href="#ref-for-point-y-coordinate①⑦">(10)</a> <a href="#ref-for-point-y-coordinate①⑧">(11)</a> <a href="#ref-for-point-y-coordinate①⑨">(12)</a>
    <li><a href="#ref-for-point-y-coordinate②⓪">7. Structured serialization</a> <a href="#ref-for-point-y-coordinate②①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="point-z-coordinate">
   <b><a href="#point-z-coordinate">#point-z-coordinate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-point-z-coordinate">2. The DOMPoint interfaces</a> <a href="#ref-for-point-z-coordinate①">(2)</a> <a href="#ref-for-point-z-coordinate②">(3)</a> <a href="#ref-for-point-z-coordinate③">(4)</a>
    <li><a href="#ref-for-point-z-coordinate④">2.1. Transforming a point with a matrix</a> <a href="#ref-for-point-z-coordinate⑤">(2)</a> <a href="#ref-for-point-z-coordinate⑥">(3)</a>
    <li><a href="#ref-for-point-z-coordinate⑦">5. The DOMQuad interface</a> <a href="#ref-for-point-z-coordinate⑧">(2)</a> <a href="#ref-for-point-z-coordinate⑨">(3)</a> <a href="#ref-for-point-z-coordinate①⓪">(4)</a>
    <li><a href="#ref-for-point-z-coordinate①①">7. Structured serialization</a> <a href="#ref-for-point-z-coordinate①②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="point-w-perspective">
   <b><a href="#point-w-perspective">#point-w-perspective</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-point-w-perspective">2. The DOMPoint interfaces</a> <a href="#ref-for-point-w-perspective①">(2)</a> <a href="#ref-for-point-w-perspective②">(3)</a> <a href="#ref-for-point-w-perspective③">(4)</a>
    <li><a href="#ref-for-point-w-perspective④">2.1. Transforming a point with a matrix</a> <a href="#ref-for-point-w-perspective⑤">(2)</a> <a href="#ref-for-point-w-perspective⑥">(3)</a>
    <li><a href="#ref-for-point-w-perspective⑦">5. The DOMQuad interface</a> <a href="#ref-for-point-w-perspective⑧">(2)</a> <a href="#ref-for-point-w-perspective⑨">(3)</a> <a href="#ref-for-point-w-perspective①⓪">(4)</a>
    <li><a href="#ref-for-point-w-perspective①①">7. Structured serialization</a> <a href="#ref-for-point-w-perspective①②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dompointreadonly-dompointreadonly">
   <b><a href="#dom-dompointreadonly-dompointreadonly">#dom-dompointreadonly-dompointreadonly</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dompointreadonly-dompointreadonly">2. The DOMPoint interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dompoint-dompoint">
   <b><a href="#dom-dompoint-dompoint">#dom-dompoint-dompoint</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dompoint-dompoint">2. The DOMPoint interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dompointreadonly-frompoint">
   <b><a href="#dom-dompointreadonly-frompoint">#dom-dompointreadonly-frompoint</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dompointreadonly-frompoint">2. The DOMPoint interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dompoint-frompoint">
   <b><a href="#dom-dompoint-frompoint">#dom-dompoint-frompoint</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dompoint-frompoint">2. The DOMPoint interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-dompointreadonly-from-the-dictionary">
   <b><a href="#create-a-dompointreadonly-from-the-dictionary">#create-a-dompointreadonly-from-the-dictionary</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-dompointreadonly-from-the-dictionary">2. The DOMPoint interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-dompoint-from-the-dictionary">
   <b><a href="#create-a-dompoint-from-the-dictionary">#create-a-dompoint-from-the-dictionary</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-dompoint-from-the-dictionary">2. The DOMPoint interfaces</a>
    <li><a href="#ref-for-create-a-dompoint-from-the-dictionary①">5. The DOMQuad interface</a> <a href="#ref-for-create-a-dompoint-from-the-dictionary②">(2)</a> <a href="#ref-for-create-a-dompoint-from-the-dictionary③">(3)</a> <a href="#ref-for-create-a-dompoint-from-the-dictionary④">(4)</a>
    <li><a href="#ref-for-create-a-dompoint-from-the-dictionary⑤">6.5. Immutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dompointreadonly-x">
   <b><a href="#dom-dompointreadonly-x">#dom-dompointreadonly-x</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dompointreadonly-x">2. The DOMPoint interfaces</a> <a href="#ref-for-dom-dompointreadonly-x①">(2)</a> <a href="#ref-for-dom-dompointreadonly-x②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dompointreadonly-y">
   <b><a href="#dom-dompointreadonly-y">#dom-dompointreadonly-y</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dompointreadonly-y">2. The DOMPoint interfaces</a> <a href="#ref-for-dom-dompointreadonly-y①">(2)</a> <a href="#ref-for-dom-dompointreadonly-y②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dompointreadonly-z">
   <b><a href="#dom-dompointreadonly-z">#dom-dompointreadonly-z</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dompointreadonly-z">2. The DOMPoint interfaces</a> <a href="#ref-for-dom-dompointreadonly-z①">(2)</a> <a href="#ref-for-dom-dompointreadonly-z②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dompointreadonly-w">
   <b><a href="#dom-dompointreadonly-w">#dom-dompointreadonly-w</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dompointreadonly-w">2. The DOMPoint interfaces</a> <a href="#ref-for-dom-dompointreadonly-w①">(2)</a> <a href="#ref-for-dom-dompointreadonly-w②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dompointreadonly-matrixtransform">
   <b><a href="#dom-dompointreadonly-matrixtransform">#dom-dompointreadonly-matrixtransform</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dompointreadonly-matrixtransform">2. The DOMPoint interfaces</a> <a href="#ref-for-dom-dompointreadonly-matrixtransform①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="transform-a-point-with-a-matrix">
   <b><a href="#transform-a-point-with-a-matrix">#transform-a-point-with-a-matrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-transform-a-point-with-a-matrix">2. The DOMPoint interfaces</a>
    <li><a href="#ref-for-transform-a-point-with-a-matrix①">6.5. Immutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="rectangle">
   <b><a href="#rectangle">#rectangle</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rectangle">3. The DOMRect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="rectangle-origin">
   <b><a href="#rectangle-origin">#rectangle-origin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rectangle-origin">3. The DOMRect interfaces</a> <a href="#ref-for-rectangle-origin①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="rectangle-x-coordinate">
   <b><a href="#rectangle-x-coordinate">#rectangle-x-coordinate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rectangle-x-coordinate">3. The DOMRect interfaces</a> <a href="#ref-for-rectangle-x-coordinate①">(2)</a> <a href="#ref-for-rectangle-x-coordinate②">(3)</a> <a href="#ref-for-rectangle-x-coordinate③">(4)</a> <a href="#ref-for-rectangle-x-coordinate④">(5)</a> <a href="#ref-for-rectangle-x-coordinate⑤">(6)</a> <a href="#ref-for-rectangle-x-coordinate⑥">(7)</a> <a href="#ref-for-rectangle-x-coordinate⑦">(8)</a> <a href="#ref-for-rectangle-x-coordinate⑧">(9)</a>
    <li><a href="#ref-for-rectangle-x-coordinate⑨">5. The DOMQuad interface</a>
    <li><a href="#ref-for-rectangle-x-coordinate①⓪">7. Structured serialization</a> <a href="#ref-for-rectangle-x-coordinate①①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="rectangle-y-coordinate">
   <b><a href="#rectangle-y-coordinate">#rectangle-y-coordinate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rectangle-y-coordinate">3. The DOMRect interfaces</a> <a href="#ref-for-rectangle-y-coordinate①">(2)</a> <a href="#ref-for-rectangle-y-coordinate②">(3)</a> <a href="#ref-for-rectangle-y-coordinate③">(4)</a> <a href="#ref-for-rectangle-y-coordinate④">(5)</a> <a href="#ref-for-rectangle-y-coordinate⑤">(6)</a> <a href="#ref-for-rectangle-y-coordinate⑥">(7)</a> <a href="#ref-for-rectangle-y-coordinate⑦">(8)</a> <a href="#ref-for-rectangle-y-coordinate⑧">(9)</a>
    <li><a href="#ref-for-rectangle-y-coordinate⑨">5. The DOMQuad interface</a>
    <li><a href="#ref-for-rectangle-y-coordinate①⓪">7. Structured serialization</a> <a href="#ref-for-rectangle-y-coordinate①①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="rectangle-width-dimension">
   <b><a href="#rectangle-width-dimension">#rectangle-width-dimension</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rectangle-width-dimension">3. The DOMRect interfaces</a> <a href="#ref-for-rectangle-width-dimension①">(2)</a> <a href="#ref-for-rectangle-width-dimension②">(3)</a> <a href="#ref-for-rectangle-width-dimension③">(4)</a> <a href="#ref-for-rectangle-width-dimension④">(5)</a> <a href="#ref-for-rectangle-width-dimension⑤">(6)</a> <a href="#ref-for-rectangle-width-dimension⑥">(7)</a> <a href="#ref-for-rectangle-width-dimension⑦">(8)</a>
    <li><a href="#ref-for-rectangle-width-dimension⑧">5. The DOMQuad interface</a>
    <li><a href="#ref-for-rectangle-width-dimension⑨">7. Structured serialization</a> <a href="#ref-for-rectangle-width-dimension①⓪">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="rectangle-height-dimension">
   <b><a href="#rectangle-height-dimension">#rectangle-height-dimension</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rectangle-height-dimension">3. The DOMRect interfaces</a> <a href="#ref-for-rectangle-height-dimension①">(2)</a> <a href="#ref-for-rectangle-height-dimension②">(3)</a> <a href="#ref-for-rectangle-height-dimension③">(4)</a> <a href="#ref-for-rectangle-height-dimension④">(5)</a> <a href="#ref-for-rectangle-height-dimension⑤">(6)</a> <a href="#ref-for-rectangle-height-dimension⑥">(7)</a> <a href="#ref-for-rectangle-height-dimension⑦">(8)</a>
    <li><a href="#ref-for-rectangle-height-dimension⑧">5. The DOMQuad interface</a>
    <li><a href="#ref-for-rectangle-height-dimension⑨">7. Structured serialization</a> <a href="#ref-for-rectangle-height-dimension①⓪">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="domrectreadonly">
   <b><a href="#domrectreadonly">#domrectreadonly</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-domrectreadonly">3. The DOMRect interfaces</a> <a href="#ref-for-domrectreadonly①">(2)</a> <a href="#ref-for-domrectreadonly②">(3)</a> <a href="#ref-for-domrectreadonly③">(4)</a> <a href="#ref-for-domrectreadonly④">(5)</a> <a href="#ref-for-domrectreadonly⑤">(6)</a> <a href="#ref-for-domrectreadonly⑥">(7)</a> <a href="#ref-for-domrectreadonly⑦">(8)</a> <a href="#ref-for-domrectreadonly⑧">(9)</a>
    <li><a href="#ref-for-domrectreadonly⑨">7. Structured serialization</a> <a href="#ref-for-domrectreadonly①⓪">(2)</a>
    <li><a href="#ref-for-domrectreadonly①①">Changes since last publication</a> <a href="#ref-for-domrectreadonly①②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="svgrect">
   <b><a href="#svgrect">#svgrect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-svgrect">1. Introduction</a>
    <li><a href="#ref-for-svgrect①">9.2. SVG</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="domrect">
   <b><a href="#domrect">#domrect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-domrect">3. The DOMRect interfaces</a> <a href="#ref-for-domrect①">(2)</a> <a href="#ref-for-domrect②">(3)</a> <a href="#ref-for-domrect③">(4)</a> <a href="#ref-for-domrect④">(5)</a> <a href="#ref-for-domrect⑤">(6)</a> <a href="#ref-for-domrect⑥">(7)</a> <a href="#ref-for-domrect⑦">(8)</a> <a href="#ref-for-domrect⑧">(9)</a>
    <li><a href="#ref-for-domrect⑨">4. The DOMRectList interface</a> <a href="#ref-for-domrect①⓪">(2)</a> <a href="#ref-for-domrect①①">(3)</a> <a href="#ref-for-domrect①②">(4)</a>
    <li><a href="#ref-for-domrect①③">5. The DOMQuad interface</a> <a href="#ref-for-domrect①④">(2)</a>
    <li><a href="#ref-for-domrect①⑤">7. Structured serialization</a> <a href="#ref-for-domrect①⑥">(2)</a>
    <li><a href="#ref-for-domrect①⑦">8. Privacy and Security Considerations</a>
    <li><a href="#ref-for-domrect①⑧">9.1. CSSOM View</a>
    <li><a href="#ref-for-domrect①⑨">9.2. SVG</a>
    <li><a href="#ref-for-domrect②⓪">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domrect-x">
   <b><a href="#dom-domrect-x">#dom-domrect-x</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrect-x">3. The DOMRect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domrect-y">
   <b><a href="#dom-domrect-y">#dom-domrect-y</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrect-y">3. The DOMRect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domrect-width">
   <b><a href="#dom-domrect-width">#dom-domrect-width</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrect-width">3. The DOMRect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domrect-height">
   <b><a href="#dom-domrect-height">#dom-domrect-height</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrect-height">3. The DOMRect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-domrectinit">
   <b><a href="#dictdef-domrectinit">#dictdef-domrectinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-domrectinit">3. The DOMRect interfaces</a> <a href="#ref-for-dictdef-domrectinit①">(2)</a>
    <li><a href="#ref-for-dictdef-domrectinit②">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domrectinit-x">
   <b><a href="#dom-domrectinit-x">#dom-domrectinit-x</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrectinit-x">3. The DOMRect interfaces</a>
    <li><a href="#ref-for-dom-domrectinit-x①">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domrectinit-y">
   <b><a href="#dom-domrectinit-y">#dom-domrectinit-y</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrectinit-y">3. The DOMRect interfaces</a>
    <li><a href="#ref-for-dom-domrectinit-y①">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domrectinit-width">
   <b><a href="#dom-domrectinit-width">#dom-domrectinit-width</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrectinit-width">3. The DOMRect interfaces</a>
    <li><a href="#ref-for-dom-domrectinit-width①">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domrectinit-height">
   <b><a href="#dom-domrectinit-height">#dom-domrectinit-height</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrectinit-height">3. The DOMRect interfaces</a>
    <li><a href="#ref-for-dom-domrectinit-height①">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domrectreadonly-domrectreadonly">
   <b><a href="#dom-domrectreadonly-domrectreadonly">#dom-domrectreadonly-domrectreadonly</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrectreadonly-domrectreadonly">3. The DOMRect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domrect-domrect">
   <b><a href="#dom-domrect-domrect">#dom-domrect-domrect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrect-domrect">3. The DOMRect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domrectreadonly-fromrect">
   <b><a href="#dom-domrectreadonly-fromrect">#dom-domrectreadonly-fromrect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrectreadonly-fromrect">3. The DOMRect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domrect-fromrect">
   <b><a href="#dom-domrect-fromrect">#dom-domrect-fromrect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrect-fromrect">3. The DOMRect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-domrectreadonly-from-the-dictionary">
   <b><a href="#create-a-domrectreadonly-from-the-dictionary">#create-a-domrectreadonly-from-the-dictionary</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-domrectreadonly-from-the-dictionary">3. The DOMRect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-domrect-from-the-dictionary">
   <b><a href="#create-a-domrect-from-the-dictionary">#create-a-domrect-from-the-dictionary</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-domrect-from-the-dictionary">3. The DOMRect interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="domrectlist">
   <b><a href="#domrectlist">#domrectlist</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-domrectlist">4. The DOMRectList interface</a> <a href="#ref-for-domrectlist①">(2)</a> <a href="#ref-for-domrectlist②">(3)</a>
    <li><a href="#ref-for-domrectlist③">Changes since last publication</a> <a href="#ref-for-domrectlist④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domrectlist-length">
   <b><a href="#dom-domrectlist-length">#dom-domrectlist-length</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrectlist-length">4. The DOMRectList interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domrectlist-item">
   <b><a href="#dom-domrectlist-item">#dom-domrectlist-item</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domrectlist-item">4. The DOMRectList interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="domquad">
   <b><a href="#domquad">#domquad</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-domquad">5. The DOMQuad interface</a> <a href="#ref-for-domquad①">(2)</a> <a href="#ref-for-domquad②">(3)</a> <a href="#ref-for-domquad③">(4)</a> <a href="#ref-for-domquad④">(5)</a> <a href="#ref-for-domquad⑤">(6)</a> <a href="#ref-for-domquad⑥">(7)</a> <a href="#ref-for-domquad⑦">(8)</a> <a href="#ref-for-domquad⑧">(9)</a> <a href="#ref-for-domquad⑨">(10)</a> <a href="#ref-for-domquad①⓪">(11)</a> <a href="#ref-for-domquad①①">(12)</a> <a href="#ref-for-domquad①②">(13)</a> <a href="#ref-for-domquad①③">(14)</a> <a href="#ref-for-domquad①④">(15)</a> <a href="#ref-for-domquad①⑤">(16)</a>
    <li><a href="#ref-for-domquad①⑥">7. Structured serialization</a> <a href="#ref-for-domquad①⑦">(2)</a>
    <li><a href="#ref-for-domquad①⑧">Changes since last publication</a> <a href="#ref-for-domquad①⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-domquadinit">
   <b><a href="#dictdef-domquadinit">#dictdef-domquadinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-domquadinit">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domquadinit-p1">
   <b><a href="#dom-domquadinit-p1">#dom-domquadinit-p1</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domquadinit-p1">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domquadinit-p2">
   <b><a href="#dom-domquadinit-p2">#dom-domquadinit-p2</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domquadinit-p2">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domquadinit-p3">
   <b><a href="#dom-domquadinit-p3">#dom-domquadinit-p3</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domquadinit-p3">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domquadinit-p4">
   <b><a href="#dom-domquadinit-p4">#dom-domquadinit-p4</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domquadinit-p4">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="quadrilateral-point-1">
   <b><a href="#quadrilateral-point-1">#quadrilateral-point-1</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-quadrilateral-point-1">5. The DOMQuad interface</a> <a href="#ref-for-quadrilateral-point-1①">(2)</a> <a href="#ref-for-quadrilateral-point-1②">(3)</a> <a href="#ref-for-quadrilateral-point-1③">(4)</a> <a href="#ref-for-quadrilateral-point-1④">(5)</a> <a href="#ref-for-quadrilateral-point-1⑤">(6)</a> <a href="#ref-for-quadrilateral-point-1⑥">(7)</a> <a href="#ref-for-quadrilateral-point-1⑦">(8)</a>
    <li><a href="#ref-for-quadrilateral-point-1⑧">7. Structured serialization</a> <a href="#ref-for-quadrilateral-point-1⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="quadrilateral-point-2">
   <b><a href="#quadrilateral-point-2">#quadrilateral-point-2</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-quadrilateral-point-2">5. The DOMQuad interface</a> <a href="#ref-for-quadrilateral-point-2①">(2)</a> <a href="#ref-for-quadrilateral-point-2②">(3)</a> <a href="#ref-for-quadrilateral-point-2③">(4)</a> <a href="#ref-for-quadrilateral-point-2④">(5)</a> <a href="#ref-for-quadrilateral-point-2⑤">(6)</a> <a href="#ref-for-quadrilateral-point-2⑥">(7)</a> <a href="#ref-for-quadrilateral-point-2⑦">(8)</a>
    <li><a href="#ref-for-quadrilateral-point-2⑧">7. Structured serialization</a> <a href="#ref-for-quadrilateral-point-2⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="quadrilateral-point-3">
   <b><a href="#quadrilateral-point-3">#quadrilateral-point-3</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-quadrilateral-point-3">5. The DOMQuad interface</a> <a href="#ref-for-quadrilateral-point-3①">(2)</a> <a href="#ref-for-quadrilateral-point-3②">(3)</a> <a href="#ref-for-quadrilateral-point-3③">(4)</a> <a href="#ref-for-quadrilateral-point-3④">(5)</a> <a href="#ref-for-quadrilateral-point-3⑤">(6)</a> <a href="#ref-for-quadrilateral-point-3⑥">(7)</a> <a href="#ref-for-quadrilateral-point-3⑦">(8)</a>
    <li><a href="#ref-for-quadrilateral-point-3⑧">7. Structured serialization</a> <a href="#ref-for-quadrilateral-point-3⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="quadrilateral-point-4">
   <b><a href="#quadrilateral-point-4">#quadrilateral-point-4</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-quadrilateral-point-4">5. The DOMQuad interface</a> <a href="#ref-for-quadrilateral-point-4①">(2)</a> <a href="#ref-for-quadrilateral-point-4②">(3)</a> <a href="#ref-for-quadrilateral-point-4③">(4)</a> <a href="#ref-for-quadrilateral-point-4④">(5)</a> <a href="#ref-for-quadrilateral-point-4⑤">(6)</a> <a href="#ref-for-quadrilateral-point-4⑥">(7)</a> <a href="#ref-for-quadrilateral-point-4⑦">(8)</a>
    <li><a href="#ref-for-quadrilateral-point-4⑧">7. Structured serialization</a> <a href="#ref-for-quadrilateral-point-4⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domquad-domquad">
   <b><a href="#dom-domquad-domquad">#dom-domquad-domquad</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domquad-domquad">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domquad-fromrect">
   <b><a href="#dom-domquad-fromrect">#dom-domquad-fromrect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domquad-fromrect">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-domquad-from-the-domrectinit-dictionary">
   <b><a href="#create-a-domquad-from-the-domrectinit-dictionary">#create-a-domquad-from-the-domrectinit-dictionary</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-domquad-from-the-domrectinit-dictionary">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domquad-fromquad">
   <b><a href="#dom-domquad-fromquad">#dom-domquad-fromquad</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domquad-fromquad">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-domquad-from-the-domquadinit-dictionary">
   <b><a href="#create-a-domquad-from-the-domquadinit-dictionary">#create-a-domquad-from-the-domquadinit-dictionary</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-domquad-from-the-domquadinit-dictionary">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domquad-p1">
   <b><a href="#dom-domquad-p1">#dom-domquad-p1</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domquad-p1">5. The DOMQuad interface</a> <a href="#ref-for-dom-domquad-p1①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domquad-p2">
   <b><a href="#dom-domquad-p2">#dom-domquad-p2</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domquad-p2">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domquad-p3">
   <b><a href="#dom-domquad-p3">#dom-domquad-p3</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domquad-p3">5. The DOMQuad interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domquad-p4">
   <b><a href="#dom-domquad-p4">#dom-domquad-p4</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domquad-p4">5. The DOMQuad interface</a> <a href="#ref-for-dom-domquad-p4①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-domquad-getbounds">
   <b><a href="#dom-domquad-getbounds">#dom-domquad-getbounds</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-domquad-getbounds">5. The DOMQuad interface</a> <a href="#ref-for-dom-domquad-getbounds①">(2)</a>
    <li><a href="#ref-for-dom-domquad-getbounds②">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix">
   <b><a href="#matrix">#matrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix">2.1. Transforming a point with a matrix</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="4x4-abstract-matrix">
   <b><a href="#4x4-abstract-matrix">#4x4-abstract-matrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-4x4-abstract-matrix">6.2. Parsing a string into an abstract matrix</a> <a href="#ref-for-4x4-abstract-matrix①">(2)</a> <a href="#ref-for-4x4-abstract-matrix②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="post-multiply">
   <b><a href="#post-multiply">#post-multiply</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-post-multiply">2.1. Transforming a point with a matrix</a>
    <li><a href="#ref-for-post-multiply①">6.2. Parsing a string into an abstract matrix</a>
    <li><a href="#ref-for-post-multiply②">6.5. Immutable transformation methods</a> <a href="#ref-for-post-multiply③">(2)</a>
    <li><a href="#ref-for-post-multiply④">6.6. Mutable transformation methods</a> <a href="#ref-for-post-multiply⑤">(2)</a> <a href="#ref-for-post-multiply⑥">(3)</a> <a href="#ref-for-post-multiply⑦">(4)</a> <a href="#ref-for-post-multiply⑧">(5)</a> <a href="#ref-for-post-multiply⑨">(6)</a> <a href="#ref-for-post-multiply①⓪">(7)</a> <a href="#ref-for-post-multiply①①">(8)</a> <a href="#ref-for-post-multiply①②">(9)</a> <a href="#ref-for-post-multiply①③">(10)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dommatrixreadonly">
   <b><a href="#dommatrixreadonly">#dommatrixreadonly</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dommatrixreadonly">6. The DOMMatrix interfaces</a> <a href="#ref-for-dommatrixreadonly①">(2)</a> <a href="#ref-for-dommatrixreadonly②">(3)</a> <a href="#ref-for-dommatrixreadonly③">(4)</a> <a href="#ref-for-dommatrixreadonly④">(5)</a> <a href="#ref-for-dommatrixreadonly⑤">(6)</a> <a href="#ref-for-dommatrixreadonly⑥">(7)</a> <a href="#ref-for-dommatrixreadonly⑦">(8)</a> <a href="#ref-for-dommatrixreadonly⑧">(9)</a>
    <li><a href="#ref-for-dommatrixreadonly⑨">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a> <a href="#ref-for-dommatrixreadonly①⓪">(2)</a> <a href="#ref-for-dommatrixreadonly①①">(3)</a> <a href="#ref-for-dommatrixreadonly①②">(4)</a> <a href="#ref-for-dommatrixreadonly①③">(5)</a> <a href="#ref-for-dommatrixreadonly①④">(6)</a> <a href="#ref-for-dommatrixreadonly①⑤">(7)</a> <a href="#ref-for-dommatrixreadonly①⑥">(8)</a> <a href="#ref-for-dommatrixreadonly①⑦">(9)</a> <a href="#ref-for-dommatrixreadonly①⑧">(10)</a> <a href="#ref-for-dommatrixreadonly①⑨">(11)</a> <a href="#ref-for-dommatrixreadonly②⓪">(12)</a> <a href="#ref-for-dommatrixreadonly②①">(13)</a> <a href="#ref-for-dommatrixreadonly②②">(14)</a> <a href="#ref-for-dommatrixreadonly②③">(15)</a> <a href="#ref-for-dommatrixreadonly②④">(16)</a> <a href="#ref-for-dommatrixreadonly②⑤">(17)</a>
    <li><a href="#ref-for-dommatrixreadonly②⑥">6.4. DOMMatrix attributes</a> <a href="#ref-for-dommatrixreadonly②⑦">(2)</a>
    <li><a href="#ref-for-dommatrixreadonly②⑧">7. Structured serialization</a> <a href="#ref-for-dommatrixreadonly②⑨">(2)</a> <a href="#ref-for-dommatrixreadonly③⓪">(3)</a>
    <li><a href="#ref-for-dommatrixreadonly③①">8. Privacy and Security Considerations</a>
    <li><a href="#ref-for-dommatrixreadonly③②">Changes since last publication</a> <a href="#ref-for-dommatrixreadonly③③">(2)</a> <a href="#ref-for-dommatrixreadonly③④">(3)</a> <a href="#ref-for-dommatrixreadonly③⑤">(4)</a> <a href="#ref-for-dommatrixreadonly③⑥">(5)</a> <a href="#ref-for-dommatrixreadonly③⑦">(6)</a> <a href="#ref-for-dommatrixreadonly③⑧">(7)</a> <a href="#ref-for-dommatrixreadonly③⑨">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="svgmatrix">
   <b><a href="#svgmatrix">#svgmatrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-svgmatrix">1. Introduction</a>
    <li><a href="#ref-for-svgmatrix①">6.5. Immutable transformation methods</a>
    <li><a href="#ref-for-svgmatrix②">9.2. SVG</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="webkitcssmatrix">
   <b><a href="#webkitcssmatrix">#webkitcssmatrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-webkitcssmatrix">9.3. Non-standard</a>
    <li><a href="#ref-for-webkitcssmatrix①">Changes since last publication</a> <a href="#ref-for-webkitcssmatrix②">(2)</a> <a href="#ref-for-webkitcssmatrix③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dommatrix">
   <b><a href="#dommatrix">#dommatrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dommatrix">2. The DOMPoint interfaces</a>
    <li><a href="#ref-for-dommatrix①">6. The DOMMatrix interfaces</a> <a href="#ref-for-dommatrix②">(2)</a> <a href="#ref-for-dommatrix③">(3)</a> <a href="#ref-for-dommatrix④">(4)</a> <a href="#ref-for-dommatrix⑤">(5)</a> <a href="#ref-for-dommatrix⑥">(6)</a> <a href="#ref-for-dommatrix⑦">(7)</a> <a href="#ref-for-dommatrix⑧">(8)</a> <a href="#ref-for-dommatrix⑨">(9)</a> <a href="#ref-for-dommatrix①⓪">(10)</a> <a href="#ref-for-dommatrix①①">(11)</a> <a href="#ref-for-dommatrix①②">(12)</a> <a href="#ref-for-dommatrix①③">(13)</a> <a href="#ref-for-dommatrix①④">(14)</a> <a href="#ref-for-dommatrix①⑤">(15)</a> <a href="#ref-for-dommatrix①⑥">(16)</a> <a href="#ref-for-dommatrix①⑦">(17)</a> <a href="#ref-for-dommatrix①⑧">(18)</a> <a href="#ref-for-dommatrix①⑨">(19)</a> <a href="#ref-for-dommatrix②⓪">(20)</a> <a href="#ref-for-dommatrix②①">(21)</a> <a href="#ref-for-dommatrix②②">(22)</a> <a href="#ref-for-dommatrix②③">(23)</a> <a href="#ref-for-dommatrix②④">(24)</a> <a href="#ref-for-dommatrix②⑤">(25)</a> <a href="#ref-for-dommatrix②⑥">(26)</a> <a href="#ref-for-dommatrix②⑦">(27)</a> <a href="#ref-for-dommatrix②⑧">(28)</a> <a href="#ref-for-dommatrix②⑨">(29)</a> <a href="#ref-for-dommatrix③⓪">(30)</a> <a href="#ref-for-dommatrix③①">(31)</a>
    <li><a href="#ref-for-dommatrix③②">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a> <a href="#ref-for-dommatrix③③">(2)</a> <a href="#ref-for-dommatrix③④">(3)</a> <a href="#ref-for-dommatrix③⑤">(4)</a> <a href="#ref-for-dommatrix③⑥">(5)</a> <a href="#ref-for-dommatrix③⑦">(6)</a> <a href="#ref-for-dommatrix③⑧">(7)</a> <a href="#ref-for-dommatrix③⑨">(8)</a> <a href="#ref-for-dommatrix④⓪">(9)</a> <a href="#ref-for-dommatrix④①">(10)</a> <a href="#ref-for-dommatrix④②">(11)</a> <a href="#ref-for-dommatrix④③">(12)</a> <a href="#ref-for-dommatrix④④">(13)</a> <a href="#ref-for-dommatrix④⑤">(14)</a> <a href="#ref-for-dommatrix④⑥">(15)</a> <a href="#ref-for-dommatrix④⑦">(16)</a> <a href="#ref-for-dommatrix④⑧">(17)</a>
    <li><a href="#ref-for-dommatrix④⑨">6.4. DOMMatrix attributes</a> <a href="#ref-for-dommatrix⑤⓪">(2)</a> <a href="#ref-for-dommatrix⑤①">(3)</a> <a href="#ref-for-dommatrix⑤②">(4)</a> <a href="#ref-for-dommatrix⑤③">(5)</a> <a href="#ref-for-dommatrix⑤④">(6)</a> <a href="#ref-for-dommatrix⑤⑤">(7)</a> <a href="#ref-for-dommatrix⑤⑥">(8)</a> <a href="#ref-for-dommatrix⑤⑦">(9)</a> <a href="#ref-for-dommatrix⑤⑧">(10)</a> <a href="#ref-for-dommatrix⑤⑨">(11)</a> <a href="#ref-for-dommatrix⑥⓪">(12)</a> <a href="#ref-for-dommatrix⑥①">(13)</a> <a href="#ref-for-dommatrix⑥②">(14)</a> <a href="#ref-for-dommatrix⑥③">(15)</a> <a href="#ref-for-dommatrix⑥④">(16)</a> <a href="#ref-for-dommatrix⑥⑤">(17)</a>
    <li><a href="#ref-for-dommatrix⑥⑥">6.5. Immutable transformation methods</a>
    <li><a href="#ref-for-dommatrix⑥⑦">6.6. Mutable transformation methods</a>
    <li><a href="#ref-for-dommatrix⑥⑧">7. Structured serialization</a> <a href="#ref-for-dommatrix⑥⑨">(2)</a> <a href="#ref-for-dommatrix⑦⓪">(3)</a>
    <li><a href="#ref-for-dommatrix⑦①">8. Privacy and Security Considerations</a>
    <li><a href="#ref-for-dommatrix⑦②">9.2. SVG</a>
    <li><a href="#ref-for-dommatrix⑦③">9.3. Non-standard</a>
    <li><a href="#ref-for-dommatrix⑦④">Changes since last publication</a> <a href="#ref-for-dommatrix⑦⑤">(2)</a> <a href="#ref-for-dommatrix⑦⑥">(3)</a> <a href="#ref-for-dommatrix⑦⑦">(4)</a> <a href="#ref-for-dommatrix⑦⑧">(5)</a> <a href="#ref-for-dommatrix⑦⑨">(6)</a> <a href="#ref-for-dommatrix⑧⓪">(7)</a> <a href="#ref-for-dommatrix⑧①">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-dommatrix2dinit">
   <b><a href="#dictdef-dommatrix2dinit">#dictdef-dommatrix2dinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-dommatrix2dinit">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dictdef-dommatrix2dinit①">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix2dinit-a">
   <b><a href="#dom-dommatrix2dinit-a">#dom-dommatrix2dinit-a</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix2dinit-a">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrix2dinit-a①">(2)</a> <a href="#ref-for-dom-dommatrix2dinit-a②">(3)</a> <a href="#ref-for-dom-dommatrix2dinit-a③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix2dinit-b">
   <b><a href="#dom-dommatrix2dinit-b">#dom-dommatrix2dinit-b</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix2dinit-b">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrix2dinit-b①">(2)</a> <a href="#ref-for-dom-dommatrix2dinit-b②">(3)</a> <a href="#ref-for-dom-dommatrix2dinit-b③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix2dinit-c">
   <b><a href="#dom-dommatrix2dinit-c">#dom-dommatrix2dinit-c</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix2dinit-c">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrix2dinit-c①">(2)</a> <a href="#ref-for-dom-dommatrix2dinit-c②">(3)</a> <a href="#ref-for-dom-dommatrix2dinit-c③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix2dinit-d">
   <b><a href="#dom-dommatrix2dinit-d">#dom-dommatrix2dinit-d</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix2dinit-d">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrix2dinit-d①">(2)</a> <a href="#ref-for-dom-dommatrix2dinit-d②">(3)</a> <a href="#ref-for-dom-dommatrix2dinit-d③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix2dinit-e">
   <b><a href="#dom-dommatrix2dinit-e">#dom-dommatrix2dinit-e</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix2dinit-e">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrix2dinit-e①">(2)</a> <a href="#ref-for-dom-dommatrix2dinit-e②">(3)</a> <a href="#ref-for-dom-dommatrix2dinit-e③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix2dinit-f">
   <b><a href="#dom-dommatrix2dinit-f">#dom-dommatrix2dinit-f</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix2dinit-f">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrix2dinit-f①">(2)</a> <a href="#ref-for-dom-dommatrix2dinit-f②">(3)</a> <a href="#ref-for-dom-dommatrix2dinit-f③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix2dinit-m11">
   <b><a href="#dom-dommatrix2dinit-m11">#dom-dommatrix2dinit-m11</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix2dinit-m11">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrix2dinit-m11①">(2)</a> <a href="#ref-for-dom-dommatrix2dinit-m11②">(3)</a>
    <li><a href="#ref-for-dom-dommatrix2dinit-m11③">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a> <a href="#ref-for-dom-dommatrix2dinit-m11④">(2)</a> <a href="#ref-for-dom-dommatrix2dinit-m11⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix2dinit-m12">
   <b><a href="#dom-dommatrix2dinit-m12">#dom-dommatrix2dinit-m12</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix2dinit-m12">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrix2dinit-m12①">(2)</a> <a href="#ref-for-dom-dommatrix2dinit-m12②">(3)</a>
    <li><a href="#ref-for-dom-dommatrix2dinit-m12③">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a> <a href="#ref-for-dom-dommatrix2dinit-m12④">(2)</a> <a href="#ref-for-dom-dommatrix2dinit-m12⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix2dinit-m21">
   <b><a href="#dom-dommatrix2dinit-m21">#dom-dommatrix2dinit-m21</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix2dinit-m21">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrix2dinit-m21①">(2)</a> <a href="#ref-for-dom-dommatrix2dinit-m21②">(3)</a>
    <li><a href="#ref-for-dom-dommatrix2dinit-m21③">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a> <a href="#ref-for-dom-dommatrix2dinit-m21④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix2dinit-m22">
   <b><a href="#dom-dommatrix2dinit-m22">#dom-dommatrix2dinit-m22</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix2dinit-m22">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrix2dinit-m22①">(2)</a> <a href="#ref-for-dom-dommatrix2dinit-m22②">(3)</a>
    <li><a href="#ref-for-dom-dommatrix2dinit-m22③">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a> <a href="#ref-for-dom-dommatrix2dinit-m22④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix2dinit-m41">
   <b><a href="#dom-dommatrix2dinit-m41">#dom-dommatrix2dinit-m41</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix2dinit-m41">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrix2dinit-m41①">(2)</a> <a href="#ref-for-dom-dommatrix2dinit-m41②">(3)</a>
    <li><a href="#ref-for-dom-dommatrix2dinit-m41③">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a> <a href="#ref-for-dom-dommatrix2dinit-m41④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix2dinit-m42">
   <b><a href="#dom-dommatrix2dinit-m42">#dom-dommatrix2dinit-m42</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix2dinit-m42">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrix2dinit-m42①">(2)</a> <a href="#ref-for-dom-dommatrix2dinit-m42②">(3)</a>
    <li><a href="#ref-for-dom-dommatrix2dinit-m42③">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a> <a href="#ref-for-dom-dommatrix2dinit-m42④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-dommatrixinit">
   <b><a href="#dictdef-dommatrixinit">#dictdef-dommatrixinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-dommatrixinit">2. The DOMPoint interfaces</a>
    <li><a href="#ref-for-dictdef-dommatrixinit①">6. The DOMMatrix interfaces</a> <a href="#ref-for-dictdef-dommatrixinit②">(2)</a> <a href="#ref-for-dictdef-dommatrixinit③">(3)</a> <a href="#ref-for-dictdef-dommatrixinit④">(4)</a> <a href="#ref-for-dictdef-dommatrixinit⑤">(5)</a>
    <li><a href="#ref-for-dictdef-dommatrixinit⑥">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dictdef-dommatrixinit⑦">(2)</a>
    <li><a href="#ref-for-dictdef-dommatrixinit⑧">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixinit-m13">
   <b><a href="#dom-dommatrixinit-m13">#dom-dommatrixinit-m13</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixinit-m13">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrixinit-m13①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixinit-m13②">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixinit-m14">
   <b><a href="#dom-dommatrixinit-m14">#dom-dommatrixinit-m14</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixinit-m14">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrixinit-m14①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixinit-m23">
   <b><a href="#dom-dommatrixinit-m23">#dom-dommatrixinit-m23</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixinit-m23">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrixinit-m23①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixinit-m24">
   <b><a href="#dom-dommatrixinit-m24">#dom-dommatrixinit-m24</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixinit-m24">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrixinit-m24①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixinit-m31">
   <b><a href="#dom-dommatrixinit-m31">#dom-dommatrixinit-m31</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixinit-m31">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrixinit-m31①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixinit-m32">
   <b><a href="#dom-dommatrixinit-m32">#dom-dommatrixinit-m32</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixinit-m32">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrixinit-m32①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixinit-m33">
   <b><a href="#dom-dommatrixinit-m33">#dom-dommatrixinit-m33</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixinit-m33">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrixinit-m33①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixinit-m34">
   <b><a href="#dom-dommatrixinit-m34">#dom-dommatrixinit-m34</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixinit-m34">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrixinit-m34①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixinit-m43">
   <b><a href="#dom-dommatrixinit-m43">#dom-dommatrixinit-m43</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixinit-m43">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrixinit-m43①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixinit-m44">
   <b><a href="#dom-dommatrixinit-m44">#dom-dommatrixinit-m44</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixinit-m44">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrixinit-m44①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixinit-m44②">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixinit-is2d">
   <b><a href="#dom-dommatrixinit-is2d">#dom-dommatrixinit-is2d</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixinit-is2d">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a> <a href="#ref-for-dom-dommatrixinit-is2d①">(2)</a> <a href="#ref-for-dom-dommatrixinit-is2d②">(3)</a> <a href="#ref-for-dom-dommatrixinit-is2d③">(4)</a>
    <li><a href="#ref-for-dom-dommatrixinit-is2d④">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m11-element">
   <b><a href="#matrix-m11-element">#matrix-m11-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m11-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a> <a href="#ref-for-matrix-m11-element①">(2)</a>
    <li><a href="#ref-for-matrix-m11-element②">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m11-element③">(2)</a> <a href="#ref-for-matrix-m11-element④">(3)</a>
    <li><a href="#ref-for-matrix-m11-element⑤">6.5. Immutable transformation methods</a> <a href="#ref-for-matrix-m11-element⑥">(2)</a> <a href="#ref-for-matrix-m11-element⑦">(3)</a>
    <li><a href="#ref-for-matrix-m11-element⑧">6.6. Mutable transformation methods</a>
    <li><a href="#ref-for-matrix-m11-element⑨">7. Structured serialization</a> <a href="#ref-for-matrix-m11-element①⓪">(2)</a> <a href="#ref-for-matrix-m11-element①①">(3)</a> <a href="#ref-for-matrix-m11-element①②">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m12-element">
   <b><a href="#matrix-m12-element">#matrix-m12-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m12-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-matrix-m12-element①">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m12-element②">(2)</a> <a href="#ref-for-matrix-m12-element③">(3)</a>
    <li><a href="#ref-for-matrix-m12-element④">6.5. Immutable transformation methods</a> <a href="#ref-for-matrix-m12-element⑤">(2)</a>
    <li><a href="#ref-for-matrix-m12-element⑥">7. Structured serialization</a> <a href="#ref-for-matrix-m12-element⑦">(2)</a> <a href="#ref-for-matrix-m12-element⑧">(3)</a> <a href="#ref-for-matrix-m12-element⑨">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m13-element">
   <b><a href="#matrix-m13-element">#matrix-m13-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m13-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-matrix-m13-element①">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m13-element②">(2)</a> <a href="#ref-for-matrix-m13-element③">(3)</a>
    <li><a href="#ref-for-matrix-m13-element④">6.5. Immutable transformation methods</a>
    <li><a href="#ref-for-matrix-m13-element⑤">7. Structured serialization</a> <a href="#ref-for-matrix-m13-element⑥">(2)</a> <a href="#ref-for-matrix-m13-element⑦">(3)</a> <a href="#ref-for-matrix-m13-element⑧">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m14-element">
   <b><a href="#matrix-m14-element">#matrix-m14-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m14-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-matrix-m14-element①">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m14-element②">(2)</a> <a href="#ref-for-matrix-m14-element③">(3)</a>
    <li><a href="#ref-for-matrix-m14-element④">6.5. Immutable transformation methods</a>
    <li><a href="#ref-for-matrix-m14-element⑤">7. Structured serialization</a> <a href="#ref-for-matrix-m14-element⑥">(2)</a> <a href="#ref-for-matrix-m14-element⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m21-element">
   <b><a href="#matrix-m21-element">#matrix-m21-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m21-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-matrix-m21-element①">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m21-element②">(2)</a> <a href="#ref-for-matrix-m21-element③">(3)</a>
    <li><a href="#ref-for-matrix-m21-element④">6.5. Immutable transformation methods</a> <a href="#ref-for-matrix-m21-element⑤">(2)</a>
    <li><a href="#ref-for-matrix-m21-element⑥">7. Structured serialization</a> <a href="#ref-for-matrix-m21-element⑦">(2)</a> <a href="#ref-for-matrix-m21-element⑧">(3)</a> <a href="#ref-for-matrix-m21-element⑨">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m22-element">
   <b><a href="#matrix-m22-element">#matrix-m22-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m22-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-matrix-m22-element①">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m22-element②">(2)</a> <a href="#ref-for-matrix-m22-element③">(3)</a>
    <li><a href="#ref-for-matrix-m22-element④">6.5. Immutable transformation methods</a> <a href="#ref-for-matrix-m22-element⑤">(2)</a>
    <li><a href="#ref-for-matrix-m22-element⑥">7. Structured serialization</a> <a href="#ref-for-matrix-m22-element⑦">(2)</a> <a href="#ref-for-matrix-m22-element⑧">(3)</a> <a href="#ref-for-matrix-m22-element⑨">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m23-element">
   <b><a href="#matrix-m23-element">#matrix-m23-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m23-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-matrix-m23-element①">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m23-element②">(2)</a> <a href="#ref-for-matrix-m23-element③">(3)</a>
    <li><a href="#ref-for-matrix-m23-element④">6.5. Immutable transformation methods</a>
    <li><a href="#ref-for-matrix-m23-element⑤">7. Structured serialization</a> <a href="#ref-for-matrix-m23-element⑥">(2)</a> <a href="#ref-for-matrix-m23-element⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m24-element">
   <b><a href="#matrix-m24-element">#matrix-m24-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m24-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-matrix-m24-element①">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m24-element②">(2)</a> <a href="#ref-for-matrix-m24-element③">(3)</a>
    <li><a href="#ref-for-matrix-m24-element④">6.5. Immutable transformation methods</a>
    <li><a href="#ref-for-matrix-m24-element⑤">7. Structured serialization</a> <a href="#ref-for-matrix-m24-element⑥">(2)</a> <a href="#ref-for-matrix-m24-element⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m31-element">
   <b><a href="#matrix-m31-element">#matrix-m31-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m31-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-matrix-m31-element①">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m31-element②">(2)</a> <a href="#ref-for-matrix-m31-element③">(3)</a>
    <li><a href="#ref-for-matrix-m31-element④">7. Structured serialization</a> <a href="#ref-for-matrix-m31-element⑤">(2)</a> <a href="#ref-for-matrix-m31-element⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m32-element">
   <b><a href="#matrix-m32-element">#matrix-m32-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m32-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-matrix-m32-element①">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m32-element②">(2)</a> <a href="#ref-for-matrix-m32-element③">(3)</a>
    <li><a href="#ref-for-matrix-m32-element④">7. Structured serialization</a> <a href="#ref-for-matrix-m32-element⑤">(2)</a> <a href="#ref-for-matrix-m32-element⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m33-element">
   <b><a href="#matrix-m33-element">#matrix-m33-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m33-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-matrix-m33-element①">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m33-element②">(2)</a> <a href="#ref-for-matrix-m33-element③">(3)</a>
    <li><a href="#ref-for-matrix-m33-element④">7. Structured serialization</a> <a href="#ref-for-matrix-m33-element⑤">(2)</a> <a href="#ref-for-matrix-m33-element⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m34-element">
   <b><a href="#matrix-m34-element">#matrix-m34-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m34-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-matrix-m34-element①">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m34-element②">(2)</a> <a href="#ref-for-matrix-m34-element③">(3)</a>
    <li><a href="#ref-for-matrix-m34-element④">7. Structured serialization</a> <a href="#ref-for-matrix-m34-element⑤">(2)</a> <a href="#ref-for-matrix-m34-element⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m41-element">
   <b><a href="#matrix-m41-element">#matrix-m41-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m41-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-matrix-m41-element①">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m41-element②">(2)</a> <a href="#ref-for-matrix-m41-element③">(3)</a>
    <li><a href="#ref-for-matrix-m41-element④">6.5. Immutable transformation methods</a> <a href="#ref-for-matrix-m41-element⑤">(2)</a>
    <li><a href="#ref-for-matrix-m41-element⑥">7. Structured serialization</a> <a href="#ref-for-matrix-m41-element⑦">(2)</a> <a href="#ref-for-matrix-m41-element⑧">(3)</a> <a href="#ref-for-matrix-m41-element⑨">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m42-element">
   <b><a href="#matrix-m42-element">#matrix-m42-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m42-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-matrix-m42-element①">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m42-element②">(2)</a> <a href="#ref-for-matrix-m42-element③">(3)</a>
    <li><a href="#ref-for-matrix-m42-element④">6.5. Immutable transformation methods</a> <a href="#ref-for-matrix-m42-element⑤">(2)</a>
    <li><a href="#ref-for-matrix-m42-element⑥">7. Structured serialization</a> <a href="#ref-for-matrix-m42-element⑦">(2)</a> <a href="#ref-for-matrix-m42-element⑧">(3)</a> <a href="#ref-for-matrix-m42-element⑨">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m43-element">
   <b><a href="#matrix-m43-element">#matrix-m43-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m43-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-matrix-m43-element①">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m43-element②">(2)</a> <a href="#ref-for-matrix-m43-element③">(3)</a>
    <li><a href="#ref-for-matrix-m43-element④">6.5. Immutable transformation methods</a>
    <li><a href="#ref-for-matrix-m43-element⑤">7. Structured serialization</a> <a href="#ref-for-matrix-m43-element⑥">(2)</a> <a href="#ref-for-matrix-m43-element⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-m44-element">
   <b><a href="#matrix-m44-element">#matrix-m44-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-m44-element">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a> <a href="#ref-for-matrix-m44-element①">(2)</a>
    <li><a href="#ref-for-matrix-m44-element②">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-m44-element③">(2)</a> <a href="#ref-for-matrix-m44-element④">(3)</a>
    <li><a href="#ref-for-matrix-m44-element⑤">6.5. Immutable transformation methods</a> <a href="#ref-for-matrix-m44-element⑥">(2)</a>
    <li><a href="#ref-for-matrix-m44-element⑦">6.6. Mutable transformation methods</a>
    <li><a href="#ref-for-matrix-m44-element⑧">7. Structured serialization</a> <a href="#ref-for-matrix-m44-element⑨">(2)</a> <a href="#ref-for-matrix-m44-element①⓪">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-validate-and-fixup-2d">
   <b><a href="#matrix-validate-and-fixup-2d">#matrix-validate-and-fixup-2d</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-validate-and-fixup-2d">6.1. DOMMatrix2DInit and DOMMatrixInit dictionaries</a>
    <li><a href="#ref-for-matrix-validate-and-fixup-2d①">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-validate-and-fixup">
   <b><a href="#matrix-validate-and-fixup">#matrix-validate-and-fixup</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-validate-and-fixup">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="parse-a-string-into-an-abstract-matrix">
   <b><a href="#parse-a-string-into-an-abstract-matrix">#parse-a-string-into-an-abstract-matrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-parse-a-string-into-an-abstract-matrix">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-parse-a-string-into-an-abstract-matrix①">6.6. Mutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-2d-matrix">
   <b><a href="#create-a-2d-matrix">#create-a-2d-matrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-2d-matrix">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a> <a href="#ref-for-create-a-2d-matrix①">(2)</a> <a href="#ref-for-create-a-2d-matrix②">(3)</a> <a href="#ref-for-create-a-2d-matrix③">(4)</a> <a href="#ref-for-create-a-2d-matrix④">(5)</a> <a href="#ref-for-create-a-2d-matrix⑤">(6)</a> <a href="#ref-for-create-a-2d-matrix⑥">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-3d-matrix">
   <b><a href="#create-a-3d-matrix">#create-a-3d-matrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-3d-matrix">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a> <a href="#ref-for-create-a-3d-matrix①">(2)</a> <a href="#ref-for-create-a-3d-matrix②">(3)</a> <a href="#ref-for-create-a-3d-matrix③">(4)</a> <a href="#ref-for-create-a-3d-matrix④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-dommatrixreadonly">
   <b><a href="#dom-dommatrixreadonly-dommatrixreadonly">#dom-dommatrixreadonly-dommatrixreadonly</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-dommatrixreadonly">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-dommatrix">
   <b><a href="#dom-dommatrix-dommatrix">#dom-dommatrix-dommatrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-dommatrix">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-frommatrix">
   <b><a href="#dom-dommatrixreadonly-frommatrix">#dom-dommatrixreadonly-frommatrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-frommatrix">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-frommatrix">
   <b><a href="#dom-dommatrix-frommatrix">#dom-dommatrix-frommatrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-frommatrix">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-dommatrixreadonly-from-the-dictionary">
   <b><a href="#create-a-dommatrixreadonly-from-the-dictionary">#create-a-dommatrixreadonly-from-the-dictionary</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-dommatrixreadonly-from-the-dictionary">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-dommatrix-from-the-dictionary">
   <b><a href="#create-a-dommatrix-from-the-dictionary">#create-a-dommatrix-from-the-dictionary</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-dommatrix-from-the-dictionary">2. The DOMPoint interfaces</a>
    <li><a href="#ref-for-create-a-dommatrix-from-the-dictionary①">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a>
    <li><a href="#ref-for-create-a-dommatrix-from-the-dictionary②">6.6. Mutable transformation methods</a> <a href="#ref-for-create-a-dommatrix-from-the-dictionary③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-fromfloat32array">
   <b><a href="#dom-dommatrixreadonly-fromfloat32array">#dom-dommatrixreadonly-fromfloat32array</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-fromfloat32array">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-fromfloat32array">
   <b><a href="#dom-dommatrix-fromfloat32array">#dom-dommatrix-fromfloat32array</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-fromfloat32array">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-fromfloat64array">
   <b><a href="#dom-dommatrixreadonly-fromfloat64array">#dom-dommatrixreadonly-fromfloat64array</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-fromfloat64array">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-fromfloat64array">
   <b><a href="#dom-dommatrix-fromfloat64array">#dom-dommatrix-fromfloat64array</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-fromfloat64array">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m11">
   <b><a href="#dom-dommatrixreadonly-m11">#dom-dommatrixreadonly-m11</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m11">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m11①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m11②">6.4. DOMMatrix attributes</a> <a href="#ref-for-dom-dommatrixreadonly-m11③">(2)</a> <a href="#ref-for-dom-dommatrixreadonly-m11④">(3)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m11⑤">6.5. Immutable transformation methods</a> <a href="#ref-for-dom-dommatrixreadonly-m11⑥">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m11⑦">6.6. Mutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-a">
   <b><a href="#dom-dommatrixreadonly-a">#dom-dommatrixreadonly-a</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-a">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-a①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-a②">6.4. DOMMatrix attributes</a> <a href="#ref-for-dom-dommatrixreadonly-a③">(2)</a> <a href="#ref-for-dom-dommatrixreadonly-a④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m12">
   <b><a href="#dom-dommatrixreadonly-m12">#dom-dommatrixreadonly-m12</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m12">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m12①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m12②">6.4. DOMMatrix attributes</a> <a href="#ref-for-dom-dommatrixreadonly-m12③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-b">
   <b><a href="#dom-dommatrixreadonly-b">#dom-dommatrixreadonly-b</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-b">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-b①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-b②">6.4. DOMMatrix attributes</a> <a href="#ref-for-dom-dommatrixreadonly-b③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m13">
   <b><a href="#dom-dommatrixreadonly-m13">#dom-dommatrixreadonly-m13</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m13">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m13①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m13②">6.4. DOMMatrix attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m14">
   <b><a href="#dom-dommatrixreadonly-m14">#dom-dommatrixreadonly-m14</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m14">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m14①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m14②">6.4. DOMMatrix attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m21">
   <b><a href="#dom-dommatrixreadonly-m21">#dom-dommatrixreadonly-m21</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m21">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m21①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m21②">6.4. DOMMatrix attributes</a> <a href="#ref-for-dom-dommatrixreadonly-m21③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-c">
   <b><a href="#dom-dommatrixreadonly-c">#dom-dommatrixreadonly-c</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-c">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-c①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-c②">6.4. DOMMatrix attributes</a> <a href="#ref-for-dom-dommatrixreadonly-c③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m22">
   <b><a href="#dom-dommatrixreadonly-m22">#dom-dommatrixreadonly-m22</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m22">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m22①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m22②">6.4. DOMMatrix attributes</a> <a href="#ref-for-dom-dommatrixreadonly-m22③">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m22④">6.6. Mutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-d">
   <b><a href="#dom-dommatrixreadonly-d">#dom-dommatrixreadonly-d</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-d">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-d①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-d②">6.4. DOMMatrix attributes</a> <a href="#ref-for-dom-dommatrixreadonly-d③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m23">
   <b><a href="#dom-dommatrixreadonly-m23">#dom-dommatrixreadonly-m23</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m23">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m23①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m23②">6.4. DOMMatrix attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m24">
   <b><a href="#dom-dommatrixreadonly-m24">#dom-dommatrixreadonly-m24</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m24">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m24①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m24②">6.4. DOMMatrix attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m31">
   <b><a href="#dom-dommatrixreadonly-m31">#dom-dommatrixreadonly-m31</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m31">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m31①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m31②">6.4. DOMMatrix attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m32">
   <b><a href="#dom-dommatrixreadonly-m32">#dom-dommatrixreadonly-m32</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m32">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m32①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m32②">6.4. DOMMatrix attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m33">
   <b><a href="#dom-dommatrixreadonly-m33">#dom-dommatrixreadonly-m33</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m33">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m33①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m33②">6.4. DOMMatrix attributes</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m33③">6.6. Mutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m34">
   <b><a href="#dom-dommatrixreadonly-m34">#dom-dommatrixreadonly-m34</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m34">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m34①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m34②">6.4. DOMMatrix attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m41">
   <b><a href="#dom-dommatrixreadonly-m41">#dom-dommatrixreadonly-m41</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m41">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m41①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m41②">6.4. DOMMatrix attributes</a> <a href="#ref-for-dom-dommatrixreadonly-m41③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-e">
   <b><a href="#dom-dommatrixreadonly-e">#dom-dommatrixreadonly-e</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-e">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-e①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-e②">6.4. DOMMatrix attributes</a> <a href="#ref-for-dom-dommatrixreadonly-e③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m42">
   <b><a href="#dom-dommatrixreadonly-m42">#dom-dommatrixreadonly-m42</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m42">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m42①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m42②">6.4. DOMMatrix attributes</a> <a href="#ref-for-dom-dommatrixreadonly-m42③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-f">
   <b><a href="#dom-dommatrixreadonly-f">#dom-dommatrixreadonly-f</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-f">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-f①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-f②">6.4. DOMMatrix attributes</a> <a href="#ref-for-dom-dommatrixreadonly-f③">(2)</a> <a href="#ref-for-dom-dommatrixreadonly-f④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m43">
   <b><a href="#dom-dommatrixreadonly-m43">#dom-dommatrixreadonly-m43</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m43">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m43①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m43②">6.4. DOMMatrix attributes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-m44">
   <b><a href="#dom-dommatrixreadonly-m44">#dom-dommatrixreadonly-m44</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-m44">6. The DOMMatrix interfaces</a> <a href="#ref-for-dom-dommatrixreadonly-m44①">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m44②">6.4. DOMMatrix attributes</a> <a href="#ref-for-dom-dommatrixreadonly-m44③">(2)</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-m44④">6.5. Immutable transformation methods</a> <a href="#ref-for-dom-dommatrixreadonly-m44⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-is2d">
   <b><a href="#dom-dommatrixreadonly-is2d">#dom-dommatrixreadonly-is2d</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-is2d">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-is2d①">Changes since last publication</a> <a href="#ref-for-dom-dommatrixreadonly-is2d②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-isidentity">
   <b><a href="#dom-dommatrixreadonly-isidentity">#dom-dommatrixreadonly-isidentity</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-isidentity">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-isidentity①">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="matrix-is-2d">
   <b><a href="#matrix-is-2d">#matrix-is-2d</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-matrix-is-2d">2.1. Transforming a point with a matrix</a>
    <li><a href="#ref-for-matrix-is-2d①">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-matrix-is-2d②">6.3. Creating DOMMatrixReadOnly and DOMMatrix objects</a> <a href="#ref-for-matrix-is-2d③">(2)</a>
    <li><a href="#ref-for-matrix-is-2d④">6.4. DOMMatrix attributes</a> <a href="#ref-for-matrix-is-2d⑤">(2)</a> <a href="#ref-for-matrix-is-2d⑥">(3)</a> <a href="#ref-for-matrix-is-2d⑦">(4)</a> <a href="#ref-for-matrix-is-2d⑧">(5)</a> <a href="#ref-for-matrix-is-2d⑨">(6)</a> <a href="#ref-for-matrix-is-2d①⓪">(7)</a> <a href="#ref-for-matrix-is-2d①①">(8)</a> <a href="#ref-for-matrix-is-2d①②">(9)</a> <a href="#ref-for-matrix-is-2d①③">(10)</a> <a href="#ref-for-matrix-is-2d①④">(11)</a> <a href="#ref-for-matrix-is-2d①⑤">(12)</a> <a href="#ref-for-matrix-is-2d①⑥">(13)</a>
    <li><a href="#ref-for-matrix-is-2d①⑦">6.5. Immutable transformation methods</a>
    <li><a href="#ref-for-matrix-is-2d①⑧">6.6. Mutable transformation methods</a> <a href="#ref-for-matrix-is-2d①⑨">(2)</a> <a href="#ref-for-matrix-is-2d②⓪">(3)</a> <a href="#ref-for-matrix-is-2d②①">(4)</a> <a href="#ref-for-matrix-is-2d②②">(5)</a> <a href="#ref-for-matrix-is-2d②③">(6)</a> <a href="#ref-for-matrix-is-2d②④">(7)</a> <a href="#ref-for-matrix-is-2d②⑤">(8)</a> <a href="#ref-for-matrix-is-2d②⑥">(9)</a> <a href="#ref-for-matrix-is-2d②⑦">(10)</a> <a href="#ref-for-matrix-is-2d②⑧">(11)</a>
    <li><a href="#ref-for-matrix-is-2d②⑨">7. Structured serialization</a> <a href="#ref-for-matrix-is-2d③⓪">(2)</a> <a href="#ref-for-matrix-is-2d③①">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-translate">
   <b><a href="#dom-dommatrixreadonly-translate">#dom-dommatrixreadonly-translate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-translate">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-scale">
   <b><a href="#dom-dommatrixreadonly-scale">#dom-dommatrixreadonly-scale</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-scale">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-scale①">6.5. Immutable transformation methods</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-scale②">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-scalenonuniform">
   <b><a href="#dom-dommatrixreadonly-scalenonuniform">#dom-dommatrixreadonly-scalenonuniform</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-scalenonuniform">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-scale3d">
   <b><a href="#dom-dommatrixreadonly-scale3d">#dom-dommatrixreadonly-scale3d</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-scale3d">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-rotate">
   <b><a href="#dom-dommatrixreadonly-rotate">#dom-dommatrixreadonly-rotate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-rotate">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-rotate①">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-rotatefromvector">
   <b><a href="#dom-dommatrixreadonly-rotatefromvector">#dom-dommatrixreadonly-rotatefromvector</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-rotatefromvector">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-rotateaxisangle">
   <b><a href="#dom-dommatrixreadonly-rotateaxisangle">#dom-dommatrixreadonly-rotateaxisangle</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-rotateaxisangle">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-skewx">
   <b><a href="#dom-dommatrixreadonly-skewx">#dom-dommatrixreadonly-skewx</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-skewx">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-skewy">
   <b><a href="#dom-dommatrixreadonly-skewy">#dom-dommatrixreadonly-skewy</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-skewy">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-multiply">
   <b><a href="#dom-dommatrixreadonly-multiply">#dom-dommatrixreadonly-multiply</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-multiply">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-flipx">
   <b><a href="#dom-dommatrixreadonly-flipx">#dom-dommatrixreadonly-flipx</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-flipx">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-flipy">
   <b><a href="#dom-dommatrixreadonly-flipy">#dom-dommatrixreadonly-flipy</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-flipy">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-inverse">
   <b><a href="#dom-dommatrixreadonly-inverse">#dom-dommatrixreadonly-inverse</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-inverse">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrixreadonly-inverse①">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-transformpoint">
   <b><a href="#dom-dommatrixreadonly-transformpoint">#dom-dommatrixreadonly-transformpoint</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-transformpoint">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-tofloat32array">
   <b><a href="#dom-dommatrixreadonly-tofloat32array">#dom-dommatrixreadonly-tofloat32array</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-tofloat32array">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrixreadonly-tofloat64array">
   <b><a href="#dom-dommatrixreadonly-tofloat64array">#dom-dommatrixreadonly-tofloat64array</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrixreadonly-tofloat64array">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dommatrixreadonly-stringification-behavior">
   <b><a href="#dommatrixreadonly-stringification-behavior">#dommatrixreadonly-stringification-behavior</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dommatrixreadonly-stringification-behavior">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-multiplyself">
   <b><a href="#dom-dommatrix-multiplyself">#dom-dommatrix-multiplyself</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-multiplyself">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrix-multiplyself①">6.5. Immutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-premultiplyself">
   <b><a href="#dom-dommatrix-premultiplyself">#dom-dommatrix-premultiplyself</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-premultiplyself">6. The DOMMatrix interfaces</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-translateself">
   <b><a href="#dom-dommatrix-translateself">#dom-dommatrix-translateself</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-translateself">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrix-translateself①">6.5. Immutable transformation methods</a>
    <li><a href="#ref-for-dom-dommatrix-translateself②">6.6. Mutable transformation methods</a> <a href="#ref-for-dom-dommatrix-translateself③">(2)</a> <a href="#ref-for-dom-dommatrix-translateself④">(3)</a> <a href="#ref-for-dom-dommatrix-translateself⑤">(4)</a>
    <li><a href="#ref-for-dom-dommatrix-translateself⑥">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-scaleself">
   <b><a href="#dom-dommatrix-scaleself">#dom-dommatrix-scaleself</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-scaleself">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrix-scaleself①">6.5. Immutable transformation methods</a> <a href="#ref-for-dom-dommatrix-scaleself②">(2)</a>
    <li><a href="#ref-for-dom-dommatrix-scaleself③">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-scale3dself">
   <b><a href="#dom-dommatrix-scale3dself">#dom-dommatrix-scale3dself</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-scale3dself">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrix-scale3dself①">6.5. Immutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-rotateself">
   <b><a href="#dom-dommatrix-rotateself">#dom-dommatrix-rotateself</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-rotateself">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrix-rotateself①">6.5. Immutable transformation methods</a>
    <li><a href="#ref-for-dom-dommatrix-rotateself②">Changes since last publication</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-rotatefromvectorself">
   <b><a href="#dom-dommatrix-rotatefromvectorself">#dom-dommatrix-rotatefromvectorself</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-rotatefromvectorself">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrix-rotatefromvectorself①">6.5. Immutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-rotateaxisangleself">
   <b><a href="#dom-dommatrix-rotateaxisangleself">#dom-dommatrix-rotateaxisangleself</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-rotateaxisangleself">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrix-rotateaxisangleself①">6.5. Immutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-skewxself">
   <b><a href="#dom-dommatrix-skewxself">#dom-dommatrix-skewxself</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-skewxself">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrix-skewxself①">6.5. Immutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-skewyself">
   <b><a href="#dom-dommatrix-skewyself">#dom-dommatrix-skewyself</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-skewyself">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrix-skewyself①">6.5. Immutable transformation methods</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-invertself">
   <b><a href="#dom-dommatrix-invertself">#dom-dommatrix-invertself</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-invertself">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrix-invertself①">6.5. Immutable transformation methods</a>
    <li><a href="#ref-for-dom-dommatrix-invertself②">Changes since last publication</a> <a href="#ref-for-dom-dommatrix-invertself③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-dommatrix-setmatrixvalue">
   <b><a href="#dom-dommatrix-setmatrixvalue">#dom-dommatrix-setmatrixvalue</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-dommatrix-setmatrixvalue">6. The DOMMatrix interfaces</a>
    <li><a href="#ref-for-dom-dommatrix-setmatrixvalue①">6.4. DOMMatrix attributes</a>
    <li><a href="#ref-for-dom-dommatrix-setmatrixvalue②">Changes since last publication</a> <a href="#ref-for-dom-dommatrix-setmatrixvalue③">(2)</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-caniuse-panel */

            window.addEventListener("load", function(){
                var panels = [].slice.call(document.querySelectorAll(".caniuse-status"));
                for(var i = 0; i < panels.length; i++) {
                    var panel = panels[i];
                    var dfn = document.querySelector("#" + panel.getAttribute("data-dfn-id"));
                    var rect = dfn.getBoundingClientRect();
                    panel.style.top = (window.scrollY + rect.top) + "px";
                }
            });
            document.body.addEventListener("click", function(e) {
                if(e.target.classList.contains("caniuse-panel-btn")) {
                    e.target.parentNode.classList.toggle("wrapped");
                }
            });</script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>